No visible date, so the posts stay evergreen. WordPress still
emits the real publish date in the page markup for Google.
------------------------------------------------------------ */
.mtin-byline,
.entry-content p.mtin-byline,
.post-content p.mtin-byline,
.wp-block-post-content p.mtin-byline {
font-family: 'Mulish', sans-serif;
/* The title above it is fluid, clamp(2.25rem, 4.6vw, 3.375rem). A fixed
byline size meant that as the window narrowed the title shrank and the
byline did not, so it read as growing. It now scales on the same curve,
which also covers every width between phone and desktop rather than
snapping at one breakpoint. */
font-size: clamp(0.625rem, 0.85vw, 0.8125rem);
font-weight: 700;
line-height: 1.55;
letter-spacing: clamp(0.07em, 0.15vw, 0.14em);
text-transform: uppercase;
color: var(--mtin-ink-soft);
margin: 0 0 clamp(1.75rem, 2.2vw, 2.25rem);
text-wrap: pretty;
}
.mtin-byline a {
color: var(--mtin-sea);
text-decoration: none;
border-bottom: 1.5px solid var(--mtin-terracotta-wash);
padding-bottom: 1px;
transition: color 140ms ease, border-color 140ms ease;
}
.mtin-byline a:hover {
color: var(--mtin-terracotta);
border-bottom-color: var(--mtin-terracotta);
}
/* ------------------------------------------------------------
11b. AUTHOR BIO BLOCK (reusable block A)
Deep marine card. Everything lives INSIDE the card, including
the heading, so nothing floats outside it.
Markup:
About the Authors: Carlo & Jeia Lauria
…
3 links
------------------------------------------------------------ */
.mtin-author {
background: var(--mtin-limestone);
padding: 40px 24px 96px;
}
.mtin-author-card {
background: var(--mtin-notte);
border: none;
border-radius: 2px;
padding: 40px;
display: grid;
grid-template-columns: auto 1fr;
gap: 34px;
align-items: start;
box-shadow: 0 18px 44px rgba(32,28,23,0.20);
}
.mtin-author-photo {
width: 128px;
height: 128px;
border-radius: 2px;
object-fit: cover;
object-position: center 18%;
display: block;
flex: none;
}
.mtin-author-card h2,
.mtin-author-card h3 {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 500;
font-size: 1.625rem;
line-height: 1.18;
letter-spacing: -0.01em;
color: #F6F0E4;
margin: 0 0 14px;
padding-top: 0;
}
.mtin-author-card h2::before,
.mtin-author-card h3::before { display: none; }
.mtin-author-card p {
font-family: 'Mulish', sans-serif;
font-size: 1.0625rem;
line-height: 1.68;
color: #C6D8DC;
margin: 0;
}
.mtin-author-links {
margin-top: 22px;
display: flex;
gap: 24px;
flex-wrap: wrap;
}
.mtin-author-links a {
font-family: 'Mulish', sans-serif;
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.02em;
color: #FFFFFF;
text-decoration: none;
border-bottom: 1.5px solid var(--mtin-terracotta-light);
padding-bottom: 2px;
transition: color 140ms ease, border-color 140ms ease;
}
.mtin-author-links a:hover {
color: var(--mtin-terracotta-wash);
border-bottom-color: var(--mtin-terracotta-wash);
}
/* ------------------------------------------------------------
11c. CALL TO ACTION BLOCK (reusable block B)
------------------------------------------------------------ */
.mtin-cta {
position: relative;
overflow: hidden;
background: #BCD6DE;
padding: 104px 24px;
text-align: center;
}
.mtin-cta::before {
content: '';
position: absolute;
inset: 24px;
border: 1.5px solid rgba(31,77,95,0.30);
pointer-events: none;
}
.mtin-cta .mtin-measure { position: relative; }
.mtin-eyebrow {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-bottom: 24px;
}
.mtin-eyebrow-rule { width: 40px; height: 1.5px; background: var(--mtin-sea-mid); }
.mtin-eyebrow-text {
font-family: 'Mulish', sans-serif;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--mtin-sea-mid);
}
.mtin-cta h2 {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 500;
font-size: clamp(2rem, 3.6vw, 2.75rem);
line-height: 1.12;
letter-spacing: -0.015em;
color: var(--mtin-ink-strong);
margin: 0 0 20px;
padding-top: 0;
text-wrap: balance;
}
.mtin-cta h2::before { display: none; }
.mtin-cta p {
font-family: 'Mulish', sans-serif;
font-size: 1.1875rem;
line-height: 1.62;
color: #3A342C;
margin: 0 auto 36px;
/* 44ch suited the old two-line copy. The current copy is a full paragraph,
and at that width it broke into six short ragged lines under a very wide
headline. */
max-width: 64ch;
text-wrap: pretty;
}
.mtin-cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 18px 40px;
background: var(--mtin-sea-mid);
color: #FFFFFF;
font-family: 'Mulish', sans-serif;
font-weight: 800;
font-size: 0.9375rem;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
border: none;
border-radius: 4px;
transition: background 140ms ease;
}
.mtin-cta-button:hover {
background: var(--mtin-sea);
color: #FFFFFF;
}
/* ------------------------------------------------------------
12. SHARED MEASURE
Any block outside the post body that must line up with the
body text (title, byline, author bio, CTA) carries
.mtin-measure so both resolve to the same text column.
------------------------------------------------------------ */
.mtin-measure {
max-width: 51rem;
margin-left: auto;
margin-right: auto;
padding-left: 1.5rem;
padding-right: 1.5rem;
box-sizing: border-box;
}
/* ------------------------------------------------------------
12b. HERO VIDEO PANEL — clamp the bleed on narrow screens
------------------------------------------------------------ */
@media (max-width: 1100px) {
.mtin-hero-panel {
top: -12px !important;
bottom: 16px !important;
left: -10px !important;
right: 26px !important;
}
}
/* ------------------------------------------------------------
13. MOBILE
------------------------------------------------------------ */
@media (max-width: 768px) {
.entry-content,
.post-content,
.wp-block-post-content,
.mtin-measure {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.entry-content,
.post-content,
.wp-block-post-content {
font-size: 1.0625rem;
line-height: 1.72;
}
.entry-content > p:first-of-type,
.post-content > p:first-of-type,
.wp-block-post-content > p:first-of-type {
font-size: 1.1875rem;
}
.entry-content h2,
.post-content h2,
.wp-block-post-content h2 {
margin-top: 2.75rem;
}
.entry-content blockquote,
.post-content blockquote,
.wp-block-post-content blockquote {
padding: 2rem 1.375rem 1.5rem 2.75rem;
font-size: 1.25rem;
margin: 2rem 0;
}
.entry-content blockquote::before,
.post-content blockquote::before,
.wp-block-post-content blockquote::before {
left: 0.7rem; top: 1.1rem; font-size: 3.25rem;
}
.entry-content blockquote p,
.post-content blockquote p {
font-size: inherit;
}
.entry-content table th,
.entry-content table td,
.post-content table th,
.post-content table td {
padding: 0.75rem 0.875rem;
font-size: 0.9375rem;
}
.entry-content table td:first-child,
.post-content table td:first-child {
white-space: normal;
}
.mtin-author {
padding: 28px 20px 64px;
}
.mtin-author-card {
grid-template-columns: 1fr;
gap: 22px;
padding: 26px;
}
.mtin-author-photo {
width: 104px;
height: 104px;
}
.mtin-author-card h2,
.mtin-author-card h3 {
font-size: 1.4rem;
}
.mtin-cta {
padding: 72px 20px;
}
.mtin-cta p { font-size: 1.0625rem; max-width: none; margin-bottom: 30px; }
.mtin-cta-button { width: 100%; }
.mtin-cta::before {
inset: 14px;
}
.mtin-cta-button {
padding: 16px 26px;
font-size: 0.875rem;
}
.entry-content .mtin-video,
.post-content .mtin-video,
.wp-block-post-content .mtin-video {
margin: 6.5rem 0;
}
.entry-content > .mtin-video:first-child,
.post-content > .mtin-video:first-child,
.wp-block-post-content > .mtin-video:first-child,
.entry-content > .mtin-byline + .mtin-video,
.post-content > .mtin-byline + .mtin-video,
.wp-block-post-content > .mtin-byline + .mtin-video {
margin-top: 4.5rem;
margin-bottom: 4.5rem;
}
.entry-content .mtin-video::after,
.post-content .mtin-video::after,
.wp-block-post-content .mtin-video::after {
top: -52px;
bottom: -52px;
}
.entry-content .mtin-video::before,
.post-content .mtin-video::before,
.wp-block-post-content .mtin-video::before {
top: -12px;
bottom: 16px;
left: -12px;
right: 20px;
}
.entry-content .mtin-video-play,
.post-content .mtin-video-play,
.wp-block-post-content .mtin-video-play {
width: 62px;
height: 62px;
}
.entry-content .mtin-video-play::before,
.post-content .mtin-video-play::before,
.wp-block-post-content .mtin-video-play::before {
border-width: 11px 0 11px 18px;
}
}
/* ============================================================
98. RESPONSIVE — HOMEPAGE SECTIONS
============================================================ */
@media (max-width: 1024px) {
.mtin-section { padding: 88px 40px !important; }
.mtin-split { grid-template-columns: 1fr !important; gap: 48px !important; }
.mtin-cards { grid-template-columns: repeat(2, 1fr) !important; }
.mtin-points { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
.mtin-hero-inner { padding-left: 40px !important; padding-right: 40px !important; }
.mtin-closing-inner { padding: 72px 40px !important; }
.mtin-heading { margin-bottom: 44px !important; }
}
@media (max-width: 900px) {
/* Founder portrait: the layered panel becomes a tight offset, and the
caption chip sits under the photo instead of floating over the edge. */
.mtin-founder-media > div:first-child {
inset: -14px -14px -14px 24px !important;
}
/* The heading already reads "Meet Carlo & Jeia", so the caption chip is
redundant on a phone and only crowds the photo. */
.mtin-founder-chip { display: none !important; }
}
@media (max-width: 720px) {
.mtin-section { padding: 64px 22px !important; }
.mtin-cards { grid-template-columns: 1fr !important; gap: 22px !important; }
.mtin-points { grid-template-columns: 1fr !important; gap: 24px !important; }
/* Hero */
.mtin-hero-wrap { height: auto !important; min-height: 0 !important; }
.mtin-hero-inner { position: relative !important; padding: 96px 22px 72px !important; }
.mtin-hero-frame { inset: 12px !important; }
.mtin-hero h1 { font-size: 2.2rem !important; max-width: none !important; }
.mtin-hero p { font-size: 1rem !important; max-width: none !important; }
.mtin-hero .mtin-eyebrow-text { font-size: 12px !important; letter-spacing: 0.18em !important; }
/* Coast cards: image gets taller, overlay type comes down to size */
.mtin-place { aspect-ratio: 3/2 !important; }
.mtin-place-kicker { font-size: 0.6875rem !important; letter-spacing: 0.16em !important; }
.mtin-place-title { font-size: 1.25rem !important; }
/* Contrast section */
.mtin-quote { font-size: 1.6rem !important; }
/* Closing */
.mtin-closing-wrap { min-height: 0 !important; }
.mtin-closing-inner { padding: 80px 22px !important; }
.mtin-closing h2 { font-size: 2.1rem !important; }
.mtin-closing p { font-size: 1rem !important; }
/* Section headings */
.mtin-heading h2 { font-size: 1.9rem !important; }
.mtin-heading p { font-size: 1rem !important; }
/* Buttons stack full width and stay tappable */
.mtin-ctas { gap: 12px !important; }
.mtin-ctas .mtin-btn {
width: 100% !important;
justify-content: center !important;
padding-top: 16px !important;
padding-bottom: 16px !important;
}
}
/* ============================================================
99. RESPONSIVE — HEADER, FOOTER, HUB
============================================================ */
@media (max-width: 1024px) {
.mtin-nav-inner { height: 100px; }
.mtin-nav-logo { height: 72px; }
.mtin-nav-links { gap: 22px; }
}
@media (max-width: 900px) {
.mtin-nav-links { display: none; }
.mtin-burger { display: flex; }
.mtin-nav-inner { height: 88px; }
.mtin-nav-logo { height: 60px; }
.mtin-nav-cta { margin-right: 58px; }
}
@media (min-width: 901px) {
.mtin-drawer, .mtin-burger { display: none; }
}
@media (max-width: 768px) {
.mtin-post-head { padding: 56px 20px 0; }
.mtin-hub { padding: 56px 20px 72px; }
.mtin-hub-grid { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 720px) {
.mtin-nav-inner { height: 84px; padding: 0 18px; gap: 12px; }
.mtin-nav-logo { height: 52px; }
.mtin-nav-cta { font-size: 12px; padding-left: 14px; padding-right: 14px; margin-right: 56px; }
.mtin-burger { top: 18px; right: 14px; }
.mtin-footer { padding: 56px 22px 32px; }
.mtin-footer-logo { height: 76px; }
.mtin-footer p { font-size: 1rem; }
.mtin-socials { gap: 26px; }
}
/* ============================================================
404
============================================================ */
.mtin-404 { background: var(--mtin-limestone); padding: 96px 24px 104px; }
.mtin-404-head { max-width: 1280px; margin: 0 auto 64px; }
.mtin-404-eyebrow {
font-family: 'Mulish', sans-serif; font-weight: 700; font-size: 0.8125rem;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--mtin-terracotta); margin: 0 0 18px;
}
.mtin-404-title {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 500; font-size: clamp(2.75rem, 6vw, 5rem); line-height: 1.02;
letter-spacing: -0.028em; color: var(--mtin-notte);
margin: 0 0 22px; text-wrap: balance;
}
.mtin-404-lede {
font-family: 'Mulish', sans-serif; font-size: 1.1875rem; line-height: 1.55;
color: var(--mtin-ink); margin: 0; max-width: 54ch; text-wrap: pretty;
}
.mtin-404-ways { max-width: 1280px; margin: 80px auto 0; }
.mtin-404-ways-label {
font-family: 'Mulish', sans-serif; font-weight: 700; font-size: 0.75rem;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--mtin-ink-soft, #6B6152); margin: 0 0 22px;
}
.mtin-404-links { display: flex; flex-wrap: wrap; gap: 14px; }
.mtin-404-links a {
font-family: 'Mulish', sans-serif; font-weight: 700; font-size: 0.9375rem;
letter-spacing: 0.03em; text-decoration: none;
color: var(--mtin-sea);
padding: 13px 22px; border: 1.5px solid var(--mtin-hairline);
border-radius: 4px;
transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.mtin-404-links a:hover {
background: var(--mtin-notte); color: var(--mtin-limestone);
border-color: var(--mtin-notte);
}
@media (max-width: 900px) {
.mtin-404 { padding: 64px 20px 80px; }
.mtin-404-head { margin-bottom: 44px; }
.mtin-404-ways { margin-top: 56px; }
}
/* ============================================================
HOMEPAGE, CLIENT PROOF
Teaser into Living the Dream. Colours match the closing block at the foot
of that template, so no terracotta here. Nothing plays: each tile is a
link, and the play button is an affordance for what is one click away.
============================================================ */
.mtin-proof {
position: relative; overflow: hidden;
background: var(--sea-200);
padding: var(--section-pad-y) 64px;
}
.mtin-proof-frame {
position: absolute; inset: 24px; pointer-events: none;
border: 1.5px solid rgba(31,77,95,0.30);
}
.mtin-proof-inner { position: relative; max-width: var(--content-max); margin: 0 auto; }
.mtin-proof-head { margin-bottom: 56px; }
.mtin-proof .mtin-eyebrow-left .rule { background: var(--sea-700); }
.mtin-proof .mtin-eyebrow-left .txt { color: var(--sea-700); }
.mtin-proof-title {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 500; font-size: clamp(2.25rem, 4vw, 3rem);
line-height: 1.15; letter-spacing: -0.015em;
color: var(--ink-900); margin: 0;
/* em, not px, so the wrap point tracks the fluid font size and the break
always lands after the first sentence. */
max-width: 13em; text-wrap: pretty;
}
.mtin-proof-lede {
font-family: 'Mulish', sans-serif; font-size: var(--type-lead);
line-height: 1.4; color: #3A342C; margin: 22px 0 0;
max-width: calc(13 * clamp(2.25rem, 4vw, 3rem)); text-wrap: pretty;
}
.mtin-proof-frames { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mtin-proof-tile {
position: relative; display: block; overflow: hidden;
border-radius: 2px; aspect-ratio: 16/9;
background: var(--notte-700);
box-shadow: 0 18px 40px rgba(22,59,69,0.22);
}
.mtin-proof-tile img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover; display: block;
filter: saturate(1.05) contrast(1.03);
transform: scale(1);
transition: transform 600ms cubic-bezier(0.2,0.6,0.2,1);
}
.mtin-proof-tile:hover img { transform: scale(1.03); }
.mtin-proof-scrim {
position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg, rgba(15,42,49,0.10), rgba(15,42,49,0.55));
}
.mtin-proof-play {
position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
width: clamp(44px, 15%, 86px); aspect-ratio: 1;
border-radius: 999px; pointer-events: none;
background: rgba(252,250,244,0.94);
box-shadow: 0 12px 34px rgba(0,0,0,0.35);
transition: background 240ms cubic-bezier(0.2,0.6,0.2,1);
}
.mtin-proof-play::before {
content: ''; position: absolute; left: 53%; top: 50%;
transform: translate(-50%,-50%);
width: 32%; height: 40%;
background: var(--sea-700);
clip-path: polygon(0 0, 100% 50%, 0 100%);
transition: background 240ms ease;
}
.mtin-proof-tile:hover .mtin-proof-play { background: var(--sea-600); }
.mtin-proof-tile:hover .mtin-proof-play::before { background: #FCFAF4; }
.mtin-proof-foot {
display: flex; align-items: center; justify-content: space-between;
gap: 44px; flex-wrap: wrap; margin-top: 56px;
}
.mtin-proof-stat { display: flex; align-items: center; gap: 20px; }
.mtin-proof-count {
flex: none;
font-family: 'Playfair Display', Georgia, serif;
font-weight: 500; font-size: clamp(3.2rem, 5.4vw, 4.6rem);
line-height: 1; letter-spacing: -0.03em; color: var(--sea-700);
}
.mtin-proof-statlabel {
font-family: 'Mulish', sans-serif; font-size: var(--type-caption);
font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--sea-700); line-height: 1.5;
max-width: 210px; text-wrap: pretty;
position: relative; top: 10px;
}
@media (max-width: 1000px) {
.mtin-proof { padding: 88px 24px; }
.mtin-proof-frames { grid-template-columns: repeat(2, 1fr); }
}
/* 720px is the homepage's phone breakpoint: .mtin-section drops to 64px 22px,
grids go single column at a 22px gap, headings to 1.9rem, ledes to 1rem,
inset frames to 12px. This section follows all of it so it reads as part of
the same page rather than an transplant. */
@media (max-width: 720px) {
.mtin-proof-frame { inset: 12px; }
.mtin-proof-inner { padding: 0; }
.mtin-proof-head { margin-bottom: 32px; }
.mtin-proof-title {
font-size: 1.9rem;
/* The em cap exists to force a break after the first sentence on a wide
screen. On a phone the column is already narrower than that, so the cap
only fights the layout. */
max-width: none;
}
.mtin-proof-lede { font-size: 1rem; margin-top: 16px; max-width: none; }
.mtin-proof-frames { grid-template-columns: 1fr; gap: 22px; }
.mtin-proof-tile { box-shadow: 0 10px 24px rgba(22,59,69,0.18); }
/* The play button floors at 44px for touch. On a full-width phone tile that
is proportionally small, so lift the share a little. */
.mtin-proof-play { width: clamp(52px, 17%, 72px); }
.mtin-proof-foot {
margin-top: 36px;
flex-direction: column; align-items: flex-start; gap: 26px;
}
.mtin-proof-count { font-size: 3rem; }
.mtin-proof-statlabel {
/* The 10px nudge centres the label against the numeral's glyph at desktop
size. At 3rem the offset is wrong, and the label no longer sits beside
a tall numeral in a cramped column. */
top: 0;
max-width: none; letter-spacing: 0.12em;
}
.mtin-proof .mtin-btn { width: 100%; padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 420px) {
.mtin-proof-title { font-size: 1.7rem; }
.mtin-proof-count { font-size: 2.6rem; }
.mtin-proof-stat { gap: 14px; }
.mtin-proof .mtin-btn { font-size: 13px; letter-spacing: 0.05em; }
}
/* ============================================================
LONG-FORM PAGES
Our Story, Carlo Lauria, Jeia Lauria.
Two hero variants, one body:
.mtin-story-hero centred over a photo, for Our Story
.mtin-story-hero-split portrait beside the title, for a person
The body, quotes, closing block and mobile rules are shared, so the three
pages read as one family. Colours in the closing block are the same ones
used at the foot of Living the Dream.
============================================================ */
/* ---------- hero ---------- */
.mtin-story-hero {
position: relative; overflow: hidden;
background: var(--notte-800);
/* Was 132px top. With the nav above it and the hairline frame inset 24px,
that pushed the portrait past the fold on a laptop. */
padding: 40px 64px 44px;
}
.mtin-story-hero > img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover;
opacity: 0.30;
}
.mtin-story-hero-wash {
position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg, rgba(15,42,49,0.70), rgba(15,42,49,0.94));
}
.mtin-story-hero-frame {
position: absolute; inset: 24px; pointer-events: none;
border: 1.5px solid rgba(255,255,255,0.26);
}
/* On the long-form pages the photo is a texture behind text, so it sits at 30%
under a heavy wash. On the contact page the coastline is the point, so it
runs at full strength under a lighter gradient that still holds the type. */
.mtin-hero-photo > img { opacity: 1; }
.mtin-hero-photo .mtin-story-hero-wash {
background: linear-gradient(180deg, rgba(12,32,38,0.42) 0%, rgba(12,32,38,0.30) 42%, rgba(12,32,38,0.78) 100%);
}
.mtin-hero-photo { padding-top: 108px; padding-bottom: 116px; }
.mtin-hero-photo h1 { text-shadow: 0 2px 24px rgba(6,18,22,0.55); }
.mtin-hero-photo .mtin-story-lede { text-shadow: 0 1px 16px rgba(6,18,22,0.5); color: rgba(255,255,255,0.94); }
@media (max-width: 1000px) { .mtin-hero-photo { padding-top: 56px; padding-bottom: 62px; } }
@media (max-width: 720px) { .mtin-hero-photo { padding-top: 44px; padding-bottom: 50px; } }
.mtin-story-hero-inner {
position: relative;
max-width: 920px; margin: 0 auto; text-align: center;
}
.mtin-story-hero h1 {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 500; font-size: clamp(2.3rem, 4.6vw, 4rem);
line-height: 1.05; letter-spacing: -0.025em;
color: var(--white); margin: 0 0 26px; text-wrap: balance;
}
.mtin-story-lede {
font-family: 'Mulish', sans-serif; font-size: var(--type-lead);
line-height: 1.5; color: rgba(255,255,255,0.9);
margin: 0 auto; max-width: 56ch; text-wrap: pretty;
}
/* ---------- split hero, person pages ---------- */
.mtin-story-hero-split .mtin-story-hero-inner {
max-width: var(--content-max); text-align: left;
display: grid; grid-template-columns: 340px 1fr;
gap: 64px; align-items: center;
}
.mtin-story-hero-split h1 { font-size: clamp(2.1rem, 3.5vw, 3.2rem); }
.mtin-story-hero-split .mtin-story-lede { margin: 0; max-width: 52ch; }
/* Our Story's hero photo is a landscape shot of the two of them, so its
column is wider and the image is 4/3 rather than the 4/5 portrait used on
the person pages. */
.mtin-story-hero-wide .mtin-story-hero-inner { grid-template-columns: 1fr 1fr; gap: 56px; }
/* Shorter crop and the focus pulled down, so most of the empty night sky is
cut off rather than the whole block being made taller to hold it. */
.mtin-story-hero-wide .mtin-story-portrait img { aspect-ratio: 16/10; object-position: center 62%; }
.mtin-story-portrait { position: relative; }
.mtin-story-portrait img {
display: block; width: 100%; aspect-ratio: 4/5;
object-fit: cover; object-position: center 22%;
border-radius: 2px;
box-shadow: 0 22px 54px rgba(6,16,20,0.44);
}
.mtin-story-portrait-frame {
position: absolute; inset: 14px; pointer-events: none;
border: 1.5px solid rgba(255,255,255,0.55);
}
/* ---------- body ---------- */
/* Same limestone as every other section under a hero: the homepage founders
block, the blog posts, the client stories, the contact section. These three
pages were one step lighter, which made them the odd ones out. */
.mtin-story-body { background: var(--limestone-100); padding: 104px 0 96px; }
/* Body copy mirrors the blog posts, so a page and a post read the same.
See blog-styling/movingtoitalynow-blog-post-072626-v20.css sections 2 and 3. */
.mtin-story-body p {
font-family: 'Mulish', sans-serif;
font-size: 1.125rem; line-height: 1.78;
color: var(--ink-700, #3A342C);
margin: 0 0 1.6rem; text-wrap: pretty;
}
/* The editorial drop-in: only the very first paragraph on the page. */
.mtin-story-body > .mtin-measure:first-child > p:first-of-type {
font-size: 1.25rem; line-height: 1.68; margin-bottom: 1.75rem;
}
.mtin-story-body h2 {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 500; font-size: clamp(1.875rem, 3.4vw, 2.5rem);
line-height: 1.16; letter-spacing: -0.015em;
color: var(--ink-900);
margin: 3.75rem 0 1.25rem; padding-top: 1.75rem;
position: relative; text-wrap: balance;
}
/* The short terracotta rule is the signature section marker on the posts. */
.mtin-story-body h2::before {
content: ''; position: absolute; top: 0; left: 0;
width: 2.5rem; height: 2px; background: var(--terracotta-600);
}
.mtin-story-body .mtin-measure > h2:first-child { margin-top: 0; }
.mtin-story-body a {
color: var(--sea-600); text-decoration: underline;
text-underline-offset: 2px; text-decoration-thickness: 1px;
transition: color 140ms ease;
}
.mtin-story-body a:hover { color: var(--terracotta-600); }
/* Quoted paragraphs are lifted out as pull quotes. The attribution stays
inside the quote, which reads better than hanging it underneath. */
.mtin-story-quote {
margin: 2.1em 0; padding: 0 0 0 28px;
border-left: 2px solid var(--terracotta-500);
}
.mtin-story-quote p {
font-family: 'Playfair Display', Georgia, serif;
font-style: italic; font-weight: 400;
font-size: clamp(1.25rem, 1.9vw, 1.55rem);
line-height: 1.45; color: var(--sea-700);
margin: 0;
}
/* ---------- photo bands inside the article ----------
Two full-bleed bands break 2,300 words into thirds. Both images are
cut-outs with no background of their own, so each band supplies one. */
/* Both images are cut-outs trimmed to their content, so the top padding is
small and deliberate: enough breathing room above their heads without the
empty band the untrimmed files produced. */
.mtin-story-band { padding: 15px 24px 0; text-align: center; }
.mtin-story-band img {
display: block; width: 100%; max-width: 760px; height: auto; margin: 0 auto;
}
.mtin-story-band-light { background: var(--limestone-100); margin-top: 72px; }
/* A real photograph rather than a cut-out, so it needs no band colour behind
it and no headroom above. */
.mtin-story-band-photo { padding: 0; margin-top: 72px; }
.mtin-story-band-photo img { max-width: 1080px; border-radius: 2px; }
.mtin-story-band-dark { background: var(--notte-800); margin-top: 72px; }
.mtin-story-band + .mtin-measure { padding-top: 72px; }
/* ---------- portrait band, Our Story ---------- */
.mtin-story-figure-band { background: var(--limestone-100); padding: 96px 64px; }
.mtin-story-figure { position: relative; max-width: 900px; margin: 0 auto; }
/* The frame is anchored to this box, not to the , so the caption's
height never enters the calculation. */
.mtin-story-figure-media { position: relative; }
.mtin-story-figure img {
display: block; width: 100%; aspect-ratio: 3/2;
object-fit: cover; border-radius: 2px;
box-shadow: 0 20px 48px rgba(32,28,23,0.22);
}
.mtin-story-figure-frame {
position: absolute; inset: 14px; pointer-events: none;
border: 1.5px solid rgba(255,255,255,0.6);
}
.mtin-story-figure figcaption {
font-family: 'Mulish', sans-serif; font-size: var(--type-caption);
font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink-500, #6B6152); margin-top: 20px; text-align: center;
}
/* ---------- closing ---------- */
.mtin-story-close {
position: relative; overflow: hidden;
background: var(--sea-200);
padding: var(--section-pad-y) 64px; text-align: center;
}
.mtin-story-close-frame {
position: absolute; inset: 24px; pointer-events: none;
border: 1.5px solid rgba(31,77,95,0.30);
}
.mtin-story-close-inner { position: relative; max-width: 780px; margin: 0 auto; }
.mtin-story-close .mtin-eyebrow-rule { background: var(--sea-700); }
.mtin-story-close .mtin-eyebrow-text { color: var(--sea-700); }
.mtin-story-close h2 {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 500; font-size: clamp(2.1rem, 3.8vw, 3.2rem);
line-height: 1.06; letter-spacing: -0.02em;
color: var(--ink-900); margin: 0 0 22px; text-wrap: balance;
}
.mtin-story-close p {
font-family: 'Mulish', sans-serif; font-size: var(--type-lead);
line-height: 1.5; color: #3A342C;
margin: 0 auto 38px; max-width: 52ch; text-wrap: pretty;
}
/* ---------- mobile, following the homepage's 720px pattern ---------- */
@media (max-width: 1000px) {
/* Horizontal padding must clear the hairline frame's 24px inset, or the
frame's left stroke lands exactly on the edge of the photo. */
.mtin-story-hero { padding: 40px 46px 46px; }
.mtin-story-hero-split .mtin-story-hero-inner {
grid-template-columns: 260px 1fr; gap: 44px;
}
.mtin-story-hero-wide .mtin-story-hero-inner { grid-template-columns: 1fr 1fr; gap: 40px; }
.mtin-story-figure-band { padding: 72px 24px; }
.mtin-story-close { padding: 88px 24px; }
}
@media (max-width: 720px) {
.mtin-story-hero { padding: 32px 22px 38px; }
.mtin-story-hero-frame,
.mtin-story-close-frame { inset: 12px; }
.mtin-story-hero h1,
.mtin-story-hero-split h1 { font-size: 2.05rem; }
.mtin-story-lede { font-size: 1rem; }
/* Portrait above the title on a phone, and narrower, so the name is not
pushed below the fold. */
.mtin-story-hero-split .mtin-story-hero-inner {
grid-template-columns: 1fr; gap: 30px; text-align: center;
}
.mtin-story-hero-split .mtin-eyebrow-left { justify-content: center; }
.mtin-story-hero-split .mtin-story-lede { margin: 0 auto; }
.mtin-story-portrait { max-width: 230px; margin: 0 auto; }
/* The couple shot is landscape, so it gets the full column on a phone
rather than being squeezed into the portrait width. */
.mtin-story-hero-wide .mtin-story-portrait { max-width: none; }
.mtin-story-portrait-frame { inset: 10px; }
.mtin-story-body { padding: 60px 0 56px; }
.mtin-story-body p { font-size: 1.0625rem; line-height: 1.72; }
.mtin-story-body > .mtin-measure:first-child > p:first-of-type { font-size: 1.1875rem; }
.mtin-story-body h2 { font-size: 1.625rem; margin: 2.75rem 0 1rem; padding-top: 1.4rem; }
.mtin-story-band { padding: 15px 18px 0; margin-top: 48px; }
.mtin-story-band + .mtin-measure { padding-top: 48px; }
.mtin-story-quote { padding-left: 18px; margin: 1.8em 0; }
.mtin-story-quote p { font-size: 1.15rem; }
.mtin-story-figure-band { padding: 56px 22px; }
.mtin-story-figure img { aspect-ratio: 4/3; }
.mtin-story-figure-frame { inset: 10px; }
.mtin-story-figure figcaption { font-size: 0.6875rem; letter-spacing: 0.12em; }
.mtin-story-close { padding: 64px 22px; }
.mtin-story-close h2 { font-size: 1.9rem; }
.mtin-story-close p { font-size: 1rem; margin-bottom: 30px; }
.mtin-story-close .mtin-btn { width: 100%; }
}
/* ============================================================
TESTIMONIAL STORIES
The client stories linked from Living the Dream. They use the blog post
styling wholesale; these are the only two additions, both structural
rather than decorative, because the stories are short and carry no H2s.
============================================================ */
.mtin-story-kicker {
display: flex; align-items: center; gap: 14px;
margin: 0 0 20px;
}
.mtin-story-kicker .rule { width: 40px; height: 1.5px; background: var(--mtin-terracotta); }
.mtin-story-kicker .txt {
font-family: 'Mulish', sans-serif; font-size: 0.75rem; font-weight: 700;
letter-spacing: 0.22em; text-transform: uppercase; color: var(--mtin-terracotta);
}
.mtin-story-back { background: var(--mtin-limestone); padding: 8px 0 34px; }
.mtin-story-back a {
display: inline-flex; align-items: center; gap: 10px;
font-family: 'Mulish', sans-serif; font-size: 1rem; font-weight: 800;
letter-spacing: 0.02em; text-decoration: none; color: var(--mtin-sea);
border-bottom: 1.5px solid var(--mtin-terracotta-wash);
padding-bottom: 1px;
transition: color 140ms ease, border-color 140ms ease;
}
/* Same treatment as the byline links, underline present at rest. */
.mtin-story-back a:hover { color: var(--mtin-terracotta); border-bottom-color: var(--mtin-terracotta); }
.mtin-story-back a::after {
content: '\203A'; font-size: 1.5rem; line-height: 0.8;
position: relative; top: -0.06em;
transition: transform 160ms ease;
}
.mtin-story-back a:hover::after { transform: translateX(3px); }
@media (max-width: 768px) {
.mtin-story-kicker { gap: 10px; margin-bottom: 16px; }
.mtin-story-kicker .rule { width: 26px; }
.mtin-story-kicker .txt { font-size: 0.6875rem; letter-spacing: 0.18em; }
.mtin-story-back { padding-bottom: 26px; }
.mtin-story-back a { font-size: 0.9375rem; }
}
/* ============================================================
CONTACT
Limestone ground, matching the homepage block under the hero, so the page
runs dark hero, light middle, dark footer rather than teal against a teal
footer. The inquiry panel is solid marine: the one dark object on a light
page, which is what pulls the eye to the form. No hairline frame on this
section, the hero above it carries the only one. A GoHighLevel embed
replaces the fieldset later; the panel stays.
============================================================ */
.mtin-contact {
position: relative; background: #F6F0E4; padding: 108px 40px 124px;
}
.mtin-contact-inner {
position: relative; max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 1fr; gap: 84px; align-items: start;
}
/* The form comes first in the source, so it is the first thing on a phone, a
tablet, or a narrowed window without needing a breakpoint to reorder it.
The story column carries 44px so its eyebrow lines up with the panel's. */
.mtin-contact-lead { padding-top: 44px; }
.mtin-contact-lead h2 {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(1.875rem, 3.1vw, 2.625rem); line-height: 1.18; font-weight: 500;
color: #163B45; margin: 0 0 18px; letter-spacing: -0.01em; text-wrap: pretty;
}
.mtin-contact-lead > p {
font-family: 'Mulish', sans-serif; font-size: 1.1875rem; line-height: 1.6;
color: #3A342C; margin: 0 0 40px; max-width: 40ch; text-wrap: pretty;
}
/* Portrait of the two of them, the homepage picture with the homepage hairline
inset. Leads the column, so their faces are level with the top of the form.
A wider crop than the homepage square, which would otherwise push the
headline too far down the page. */
.mtin-contact-photo { position: relative; margin: 38px 0 0; }
.mtin-contact-photo-frame {
/* Was 4/5 while the old long form made the left column tall. The Fluent form
is much shorter, so a portrait crop left the right column overhanging.
4/3 lands the caption roughly level with the bottom of the form panel. */
position: relative; aspect-ratio: 4 / 3; overflow: hidden;
border-radius: 2px; background: #EDE4D3;
}
.mtin-contact-photo-frame img {
display: block; width: 100%; height: 100%; object-fit: cover;
object-position: center 32%;
}
.mtin-contact-photo-frame > span {
position: absolute; inset: 14px; pointer-events: none;
border: 1.5px solid rgba(255, 255, 255, 0.7);
}
.mtin-contact-photo figcaption {
position: relative; font-family: 'Mulish', sans-serif; font-size: 0.8125rem;
font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
color: #6B6152; margin-top: 16px;
}
/* Inquiry panel */
/* min-height holds the panel's shape while the Fluent form loads, and stops it
collapsing to just its padding if the shortcode ever returns nothing. */
.mtin-form-card {
background: #163B45; padding: 44px 40px 38px; border-radius: 3px;
min-height: 520px;
box-shadow: 0 26px 64px rgba(22, 59, 69, 0.18);
}
.mtin-form-card h2 {
font-family: 'Playfair Display', Georgia, serif; font-size: 1.875rem;
line-height: 1.2; font-weight: 500; color: #FCFAF4; margin: 18px 0 12px;
}
.mtin-form-intro {
font-family: 'Mulish', sans-serif; font-size: 1rem; line-height: 1.6;
color: rgba(246, 240, 228, 0.78); margin: 0 0 30px; text-wrap: pretty;
}
.mtin-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 18px; }
.mtin-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mtin-field-wide { grid-column: 1 / -1; }
.mtin-field label {
font-family: 'Mulish', sans-serif; font-size: 0.6875rem; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
color: rgba(246, 240, 228, 0.72);
}
.mtin-field label .opt {
font-weight: 400; letter-spacing: 0.03em; text-transform: none;
color: rgba(246, 240, 228, 0.45);
}
.mtin-field input,
.mtin-field select,
.mtin-field textarea {
font-family: 'Mulish', sans-serif; font-size: 1rem; color: #FCFAF4;
background: rgba(10, 26, 31, 0.55); border: 1px solid rgba(188, 214, 222, 0.24);
border-radius: 3px; padding: 13px 14px; width: 100%;
transition: border-color 140ms ease, background 140ms ease;
}
.mtin-field textarea { min-height: 128px; resize: vertical; line-height: 1.55; }
.mtin-field input::placeholder,
.mtin-field textarea::placeholder { color: rgba(246, 240, 228, 0.38); }
.mtin-field input:focus,
.mtin-field select:focus,
.mtin-field textarea:focus {
outline: none; border-color: #C98358; background: rgba(10, 26, 31, 0.75);
}
.mtin-field select {
appearance: none;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23C98358' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 14px center;
background-size: 10px; padding-right: 34px;
}
/* Country code beside the number, with a real flag picker so nobody has to
know their own dial code. A curated list, not every country on earth, which
is what the GoHighLevel field will render once it replaces this form. */
.mtin-phone-row { display: grid; grid-template-columns: 104px 1fr; gap: 8px; }
.mtin-flagsel { position: relative; }
.mtin-flagsel-btn {
display: flex; align-items: center; gap: 7px; width: 100%; cursor: pointer;
font-family: 'Mulish', sans-serif; font-size: 1rem; color: #FCFAF4;
background: rgba(10, 26, 31, 0.55); border: 1px solid rgba(188, 214, 222, 0.24);
border-radius: 3px; padding: 13px 10px;
transition: border-color 140ms ease, background 140ms ease;
}
.mtin-flagsel-btn:hover { border-color: rgba(188, 214, 222, 0.45); }
.mtin-flagsel-btn[aria-expanded="true"] { border-color: #C98358; background: rgba(10, 26, 31, 0.75); }
.mtin-flagsel-flag { display: block; width: 20px; height: auto; border-radius: 1px; flex: 0 0 auto; }
.mtin-flagsel-dial { flex: 1 1 auto; text-align: left; }
.mtin-flagsel-caret {
width: 0; height: 0; flex: 0 0 auto;
border-left: 5px solid transparent; border-right: 5px solid transparent;
border-top: 5px solid #C98358;
}
.mtin-flagsel-list {
position: absolute; z-index: 30; top: calc(100% + 6px); left: 0;
min-width: 258px; max-height: 274px; overflow-y: auto; margin: 0; padding: 6px;
list-style: none; background: #0E2A31; border: 1px solid rgba(188, 214, 222, 0.28);
border-radius: 3px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
}
.mtin-flagsel-list li {
display: flex; align-items: center; gap: 10px; cursor: pointer;
padding: 9px 10px; border-radius: 2px;
font-family: 'Mulish', sans-serif; font-size: 0.9375rem; color: #FCFAF4;
}
.mtin-flagsel-list li:hover { background: rgba(188, 214, 222, 0.12); }
.mtin-flagsel-list li[aria-selected="true"] { background: rgba(201, 131, 88, 0.2); }
.mtin-flagsel-list img { display: block; width: 20px; height: auto; border-radius: 1px; flex: 0 0 auto; }
.mtin-flagsel-list .nm { flex: 1 1 auto; }
.mtin-flagsel-list .dl { color: rgba(246, 240, 228, 0.6); font-size: 0.875rem; }
.mtin-form-actions { margin-top: 4px; }
.mtin-form-card .mtin-cta-button { width: 100%; }
.mtin-form-small {
font-family: 'Mulish', sans-serif; font-size: 0.8125rem; line-height: 1.55;
color: rgba(246, 240, 228, 0.58); margin: 14px 0 0; text-align: center;
text-wrap: pretty;
}
@media (max-width: 1000px) {
.mtin-contact { padding: 80px 24px 92px; }
.mtin-contact-inner { grid-template-columns: 1fr; gap: 56px; }
.mtin-contact-lead { padding-top: 0; }
.mtin-form-card { padding: 34px 26px 30px; }
}
@media (max-width: 720px) {
.mtin-contact { padding: 58px 22px 72px; }
.mtin-form-grid { grid-template-columns: 1fr; gap: 18px; }
.mtin-form-card { padding: 28px 20px 26px; }
.mtin-flagsel-list { min-width: 232px; }
}
/* ------------------------------------------------------------
BUTTON LABELS ON SMALL SCREENS
.mtin-btn carries white-space: nowrap, which is right on a desktop row of
buttons but means a long label cannot wrap on a phone and pushes straight
out of the button. .mtin-cta-button has no nowrap, which is why the blog
post CTA wrapped correctly while Our Story, the bios and Living the Dream
overflowed. Both are normalised here so every closing button behaves the
same and reads at the same size.
------------------------------------------------------------ */
@media (max-width: 720px) {
.mtin-btn,
.mtin-cta-button {
white-space: normal;
text-align: center;
text-wrap: balance;
line-height: 1.3;
padding: 16px 22px;
font-size: 0.875rem;
letter-spacing: 0.06em;
width: 100%;
}
.mtin-ctas { width: 100%; }
.mtin-ctas > .mtin-btn { flex: 1 1 100%; }
}
/* ============================================================
14. FOR SALE BY OWNER (FSBO) PAGE
Template: page-for-sale-by-owner-italy.php
All classes are prefixed mtin-fsbo- so nothing here can collide
with the rules above. No new variables: the palette and fonts
come from :root at the top of this file.
============================================================ */
.mtin-fsbo-hero {
position: relative;
background: var(--notte-800);
padding: 48px 64px 44px;
text-align: center;
overflow: hidden;
}
.mtin-fsbo-hero-frame { position: absolute; inset: 24px; border: 1.5px solid rgba(255,255,255,0.26); pointer-events: none; }
.mtin-fsbo-hero-inner { position: relative; max-width: 900px; margin: 0 auto; }
.mtin-fsbo-hero h1 {
font-family: var(--font-display); font-weight: 500;
font-size: clamp(1.9rem, 3.1vw, 2.8rem);
line-height: 1.1; letter-spacing: -0.022em; color: #FFFFFF; margin: 0 0 18px;
}
.mtin-fsbo-hero p { font-size: 1.12rem; line-height: 1.55; color: rgba(255,255,255,0.9); margin: 0 auto 12px; max-width: 70ch; }
.mtin-fsbo-hero-second { color: rgba(255,255,255,0.74) !important; font-size: 1.02rem !important; margin-bottom: 0 !important; }
.mtin-fsbo-eyebrow { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 18px; }
.mtin-fsbo-eyebrow .r { width: 40px; height: 1.5px; background: var(--terracotta-500); }
.mtin-fsbo-eyebrow .t { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--terracotta-500); }
/* The 51 / 95% / 13 tally is the argument of the page and has to clear the
fold on a 1366x768 laptop. That is why the hero padding and type above are
tighter than the rest of the site. */
.mtin-fsbo-tally {
display: flex; justify-content: center; flex-wrap: wrap;
gap: 18px 54px; margin-top: 32px; padding-top: 26px;
border-top: 1px solid rgba(255,255,255,0.16);
}
.mtin-fsbo-tally div { text-align: center; }
.mtin-fsbo-tally .n { font-family: var(--font-display); font-size: 2.5rem; line-height: 1; color: #FFFFFF; }
.mtin-fsbo-tally .l { font-size: 0.72rem; letter-spacing: 0.17em; text-transform: uppercase; color: var(--terracotta-200); margin-top: 8px; }
.mtin-fsbo-wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 32px 8px; }
.mtin-fsbo-filter { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 44px 0 30px; }
.mtin-fsbo-filter button {
font-family: var(--font-body); font-size: 0.78rem; font-weight: 700;
letter-spacing: 0.13em; text-transform: uppercase; padding: 11px 20px;
border: 1px solid var(--limestone-300); background: transparent;
color: var(--ink-500); border-radius: 3px; cursor: pointer;
transition: all 160ms ease;
}
.mtin-fsbo-filter button:hover { border-color: var(--sea-600); color: var(--sea-700); }
.mtin-fsbo-filter button.is-on { background: var(--sea-700); border-color: var(--sea-700); color: #FFFFFF; }
.mtin-fsbo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 26px; }
.mtin-fsbo-card { position: relative; display: block; color: inherit; text-decoration: none; }
.mtin-fsbo-card.is-hidden { display: none; }
.mtin-fsbo-cardlink { position: absolute; inset: 0; z-index: 1; }
.mtin-fsbo-inquire { position: relative; z-index: 2; display: inline-block; text-decoration: none; }
.mtin-fsbo-inquire:hover { text-decoration: underline; }
.mtin-fsbo-shot { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 2px; background: var(--limestone-200); }
/* !important is load-bearing here, not laziness. An image-optimisation plugin
rewrites these tags server-side and stamps on
`style="width:100%;height:56.25%;max-width:1280px;"`, assuming a padding-hack
container. This box is sized by aspect-ratio instead, so that inline height
collapses the image to 56% of its box. Inline styles beat normal rules, so
only !important wins. Scoped to cards; the plugin is left alone everywhere
else. See build_theme_v32.py. */
.mtin-fsbo-shot img {
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover !important;
display: block;
transition: transform 420ms ease, filter 420ms ease;
}
.mtin-fsbo-card.is-sold .mtin-fsbo-shot img { filter: grayscale(100%) contrast(0.92) brightness(0.82); }
.mtin-fsbo-card.is-sold .mtin-fsbo-shot::after { content: ''; position: absolute; inset: 0; background: rgba(15,42,49,0.34); pointer-events: none; }
.mtin-fsbo-card.is-sold:hover .mtin-fsbo-shot img { filter: grayscale(72%) contrast(0.95) brightness(0.9); transform: scale(1.03); }
/* pointer-events:none is required, not cosmetic. This overlay covers the whole
thumbnail at a higher z-index than the card's link, so without it every sold
image is a dead click target. Same for the tag below. */
.mtin-fsbo-marker { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; z-index: 2; pointer-events: none; }
.mtin-fsbo-marker .rule { width: 26px; height: 1px; background: rgba(255,255,255,0.72); }
.mtin-fsbo-marker .txt { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.34em; text-transform: uppercase; color: #FFFFFF; text-indent: 0.34em; }
.mtin-fsbo-card.is-avail .mtin-fsbo-shot { box-shadow: 0 0 0 2px var(--terracotta-500); }
.mtin-fsbo-card.is-avail:hover .mtin-fsbo-shot img { transform: scale(1.04); }
.mtin-fsbo-tag {
position: absolute; top: 12px; left: 12px; z-index: 2;
background: var(--terracotta-500); color: #FFFFFF;
font-size: 0.63rem; font-weight: 800; letter-spacing: 0.13em;
text-transform: uppercase; padding: 6px 11px; border-radius: 2px;
pointer-events: none;
}
.mtin-fsbo-info { padding-top: 15px; }
.mtin-fsbo-ep { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-500); }
/* One line, always. A title that wraps drops this card's price below its
neighbours' and breaks the alignment of the whole row. Titles are length
capped at the source, and this is the belt-and-braces guard. */
.mtin-fsbo-name {
font-family: var(--font-display); font-size: 1.12rem; line-height: 1.3;
color: var(--ink-900); margin: 6px 0 3px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mtin-fsbo-town { font-size: 0.88rem; color: var(--ink-500); }
.mtin-fsbo-price { margin-top: 9px; display: flex; flex-direction: column; gap: 2px; }
.mtin-fsbo-price .eur { font-family: var(--font-display); font-size: 1.2rem; color: var(--sea-700); }
/* Same size as the live price. Shrinking it changed the height of the price
line on reduced cards and threw the row out of alignment. */
.mtin-fsbo-price .was { text-decoration: line-through; color: var(--ink-500); font-size: inherit; }
.mtin-fsbo-price .pnote { font-family: var(--font-body); font-size: 0.72rem; color: var(--ink-500); letter-spacing: 0.02em; }
.mtin-fsbo-price .usd { font-size: 0.7rem; color: var(--ink-500); line-height: 1.45; }
.mtin-fsbo-status { margin-top: 9px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-500); }
.mtin-fsbo-inquire { color: var(--terracotta-600); }
.mtin-fsbo-card.is-sold .mtin-fsbo-name,
.mtin-fsbo-card.is-sold .mtin-fsbo-town,
.mtin-fsbo-card.is-sold .mtin-fsbo-price .eur { color: var(--ink-500); }
.mtin-fsbo-disclaimer { max-width: 76ch; margin: 54px auto 0; font-size: 0.76rem; line-height: 1.7; color: var(--ink-500); text-align: center; }
.mtin-fsbo-close { background: var(--sea-200); padding: 100px 64px; text-align: center; position: relative; margin-top: 80px; }
.mtin-fsbo-close-frame { position: absolute; inset: 24px; border: 1.5px solid rgba(31,77,95,0.30); pointer-events: none; }
.mtin-fsbo-close-inner { position: relative; max-width: 760px; margin: 0 auto; }
.mtin-fsbo-close .mtin-fsbo-eyebrow .r { background: var(--sea-700); }
.mtin-fsbo-close .mtin-fsbo-eyebrow .t { color: var(--sea-700); }
.mtin-fsbo-close h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.08; color: var(--ink-900); margin: 0 0 18px; }
.mtin-fsbo-close p { font-size: 1.22rem; line-height: 1.5; color: #3A342C; margin: 0 auto 34px; max-width: 54ch; }
/* Nav: a fourth item does not fit between the logo and the button at
901-1024px. Without this the CTA pushes 44px past the edge and every page
on the site scrolls sideways, not just this one. */
@media (max-width: 1024px) {
.mtin-nav-inner { height: 112px; gap: 18px; padding: 0 22px; }
.mtin-nav-logo { height: 82px; }
.mtin-nav-links { gap: 22px; }
.mtin-nav-links a { font-size: 0.84rem; letter-spacing: 0.03em; }
.mtin-nav-cta { padding: 8px 14px; font-size: 12px; }
}
/* Four columns only where a card is wide enough to hold a title on one line. */
@media (max-width: 1200px) {
.mtin-fsbo-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
.mtin-fsbo-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 18px; }
.mtin-fsbo-hero { padding: 60px 24px 50px; }
.mtin-fsbo-wrap { padding: 0 22px 8px; }
.mtin-fsbo-close { padding: 80px 24px; }
}
@media (max-width: 720px) {
.mtin-fsbo-hero { padding: 52px 22px 44px; }
.mtin-fsbo-hero-frame { inset: 12px; }
.mtin-fsbo-hero h1 { font-size: 1.7rem; }
.mtin-fsbo-hero p { font-size: 1rem; }
.mtin-fsbo-hero-second { font-size: 0.95rem !important; }
.mtin-fsbo-eyebrow .t { font-size: 12px; letter-spacing: 0.18em; }
.mtin-fsbo-eyebrow .r { width: 26px; }
.mtin-fsbo-tally { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 8px; margin-top: 34px; padding-top: 28px; }
.mtin-fsbo-tally .n { font-size: 1.95rem; }
.mtin-fsbo-tally .l { font-size: 0.6rem; letter-spacing: 0.12em; margin-top: 7px; }
/* One column. At two, a phone card is too narrow to hold the price plus
three currency conversions without shredding the line. */
.mtin-fsbo-grid { grid-template-columns: 1fr; gap: 30px; }
.mtin-fsbo-filter { padding: 32px 0 24px; gap: 7px; }
.mtin-fsbo-filter button { font-size: 0.72rem; padding: 11px 15px; letter-spacing: 0.1em; }
.mtin-fsbo-inquire { padding: 6px 0; margin-top: 5px; }
.mtin-fsbo-disclaimer { margin-top: 40px; font-size: 0.75rem; text-align: left; }
.mtin-fsbo-close { padding: 72px 22px; margin-top: 56px; }
.mtin-fsbo-close-frame { inset: 12px; }
.mtin-fsbo-close h2 { font-size: 2.1rem; }
.mtin-fsbo-close p { font-size: 1rem; }
.mtin-fsbo-close .mtin-btn { width: 100%; justify-content: center; padding-top: 16px; padding-bottom: 16px; }
}
@media (max-width: 420px) {
.mtin-fsbo-hero h1 { font-size: 1.52rem; }
.mtin-fsbo-tally .n { font-size: 1.7rem; }
.mtin-fsbo-tally .l { font-size: 0.55rem; }
.mtin-fsbo-close h2 { font-size: 1.85rem; }
.mtin-fsbo-name { font-size: 1.1rem; }
}
/* Touch devices get no hover, so the sold-card un-grey never fires. */
@media (hover: none) {
.mtin-fsbo-card.is-sold:hover .mtin-fsbo-shot img,
.mtin-fsbo-card.is-avail:hover .mtin-fsbo-shot img { transform: none; }
}
/* WordPress attaches its own classes to responsive images, and the featured
image rule in section 8 gives .wp-post-image a radius and a drop shadow.
Neither belongs inside a card, where the image fills a rounded, clipped box
of its own. */
.mtin-fsbo-shot img { border-radius: 0 !important; box-shadow: none !important; }