/* ============================================================
Love, Marion — theme styles
1. Seasonal color tokens (the whole-site season engine)
2. Base + a11y
3. Ephemera (postcards, stamps, tape, polaroids, doodles)
4. Header / nav
5. Sections
6. Footer
7. Scroll reveal + motion
8. Responsive
============================================================ */
/* 1. SEASONAL TOKENS -----------------------------------------
Constants stay put; the five season blocks below swap the
accent set. Every section references these tokens (never a
raw hex), so one class on repaints the entire site.
:root default = SUMMER, tuned to the approved mockup. -------*/
:root {
--lm-paper:#f3ede1; --lm-paper-2:#e9dfce; --lm-white:#fbf8f2;
--lm-ink:#363b3e; --lm-ink-soft:#656a6d; --lm-line:#d6c9b4;
/* season set (NEUTRAL default — a missing body class must never flash the
wrong season; neutral is the safe all-season ground). 2026-08-25 */
--lm-surface:#a49386; --lm-surface-2:#eae4da; --lm-hero:#55697a;
--lm-accent:#55697a; --lm-accent-deep:#4e5257;
--lm-highlight:#a49386; --lm-gold:#a49386; --lm-deep:#4e5257;
--lm-hero-ink:#fbf8f2;
/* text colour that sits ON a --lm-hero band (light seasons flip it to ink) */
--lm-hero-ink:#fbf8f2;
/* display script scale */
--lm-script-hero:clamp(2.5rem,6.5vw,6.5rem);
--lm-script-lg:clamp(2.6rem,6vw,4.75rem);
--lm-script-md:clamp(2.35rem,5vw,3.75rem);
--lm-script-sig:clamp(2rem,3.2vw,2.4rem);
/* motion */
--lm-ease:cubic-bezier(.2,.7,.2,1); --lm-dur:.22s;
--lm-maxw:1200px; --lm-content:620px;
--lm-radius:14px;
--lm-shadow:0 2px 6px -3px rgba(54,44,40,.16), 0 22px 46px -26px rgba(54,44,40,.5);
--lm-shadow-lift:0 6px 16px -6px rgba(54,44,40,.2), 0 34px 62px -24px rgba(54,44,40,.5);
}
/* ---- OFFICIAL seasonal palettes — Beth's Color Reference (hex), 2026-08-24.
4 swatches per season mapped to token roles; hero deepened only where white
text needs contrast (spring/summer anchors are light). ---- */
/* SPRING — 9faf9a green · cfa3a9 pink · a9bfd3 blue · f4ddab butter */
body.season-spring{
/* client: "Spring: light green" -> use the true swatch 9faf9a and flip hero
text to ink (white on 9faf9a was only 3.38:1; ink is 8.1:1). */
--lm-surface:#9faf9a; --lm-surface-2:#e3e8dc; --lm-hero:#9faf9a;
--lm-accent:#a9bfd3; --lm-accent-deep:#4e5257;
--lm-highlight:#cfa3a9; --lm-gold:#f4ddab; --lm-deep:#4e5257;
--lm-hero-ink:#363b3e;
}
/* SUMMER — 86b4ad teal · 8e9dc6 periwinkle · c67e78 rose · eac08c yellow */
body.season-summer{
/* client: "Summer: yellow" -> eac08c drives the hero (was rose a55d55, which
did not match the brief). Yellow needs ink text, not white. */
--lm-surface:#c67e78; --lm-surface-2:#f7e7cd; --lm-hero:#eac08c;
--lm-accent:#86b4ad; --lm-accent-deep:#4e5257;
--lm-highlight:#8e9dc6; --lm-gold:#eac08c; --lm-deep:#4e5257;
--lm-hero-ink:#363b3e;
}
/* FALL — b08b65 tan · a65d4e rust · bd8b9a mauve · 994768 magenta (ACTIVE) */
body.season-fall{
--lm-surface:#bd8b9a; --lm-surface-2:#efdcd9; --lm-hero:#a65d4e;
--lm-accent:#bd8b9a; --lm-accent-deep:#994768;
--lm-highlight:#a65d4e; --lm-gold:#b08b65; --lm-deep:#994768;
--lm-hero-ink:#fbf8f2;
}
/* WINTER — 2f4a3f green · 7d6e68 taupe · 96abb8 blue-grey · 1e5566 deep teal */
body.season-winter{
--lm-surface:#96abb8; --lm-surface-2:#dde4e8; --lm-hero:#2f4a3f;
--lm-accent:#96abb8; --lm-accent-deep:#1e5566;
--lm-highlight:#7d6e68; --lm-gold:#7d6e68; --lm-deep:#1e5566;
--lm-hero-ink:#fbf8f2;
}
/* ALL-SEASON / NEUTRAL — f2eee6 cream · a49386 taupe · 55697a slate · 4e5257 charcoal */
body.season-all{
--lm-surface:#a49386; --lm-surface-2:#eae4da; --lm-hero:#55697a;
--lm-accent:#55697a; --lm-accent-deep:#4e5257;
--lm-highlight:#a49386; --lm-gold:#a49386; --lm-deep:#4e5257;
}
/* Re-bind WP color presets to the seasonal tokens at BODY scope.
theme.json declares e.g. --wp--preset--color--hero:var(--lm-hero) at :root,
which freezes it to the DEFAULT season. This selector (specificity beats
:root) redeclares them so has-*-background-color re-resolves per season. */
body[class*="season-"]{
--wp--preset--color--surface:var(--lm-surface);
--wp--preset--color--surface-2:var(--lm-surface-2);
--wp--preset--color--hero:var(--lm-hero);
--wp--preset--color--accent:var(--lm-accent);
--wp--preset--color--accent-deep:var(--lm-accent-deep);
--wp--preset--color--highlight:var(--lm-highlight);
--wp--preset--color--gold:var(--lm-gold);
--wp--preset--color--deep:var(--lm-deep);
}
/* 2. BASE + A11Y --------------------------------------------- */
html{ overflow-x:clip; }
/* header + hero + footer sit flush — drop WordPress's top-level block-gap strips */
.wp-site-blocks > header, .wp-site-blocks > main, .wp-site-blocks > footer{ margin-block-start:0; }
/* Full-bleed color bands must TOUCH — WP's constrained-layout block-gap was leaving
a ~22px cream (dotted body) strip between every section and above the footer,
which read as pink/cream/rust banding and "weird spacing". Sections carry their
own vertical padding, so zero the inter-section margin. */
main .lm-section, .wp-site-blocks .lm-section{ margin-block:0 !important; }
/* generous, consistent breathing room between sections. !important overrides the
per-section inline preset padding (WP 6.6 forces core-default spacing presets,
so the theme's own spacing scale can't be relied on for this). */
.lm-section{ padding-block:clamp(4rem, 6.5vw, 6.5rem) !important; }
body{
background-color:var(--lm-paper);
background-image:radial-gradient(rgba(120,100,70,.05) 1px, transparent 1px);
background-size:22px 22px;
color:var(--lm-ink);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
::selection{ background:var(--lm-accent); color:var(--lm-ink); }
:where(a, button, .wp-element-button, input, select, textarea):focus-visible{
outline:3px solid var(--lm-deep); outline-offset:2px;
}
:where(a):focus-visible{ border-radius:4px; }
img{ max-width:100%; height:auto; }
.skip-link{
position:absolute; left:-9999px; top:0; z-index:9999;
background:var(--lm-ink); color:var(--lm-white);
padding:.7rem 1.1rem; border-radius:0 0 8px 0; font-weight:700; letter-spacing:.1em;
}
.skip-link:focus{ left:0; }
/* uppercase micro-labels — two tiers only.
KICKERS = 0.2em / 0.75rem / 700 · CONTROLS/META = 0.1em */
.lm-eyebrow{
font-family:var(--wp--preset--font-family--sans);
text-transform:uppercase; letter-spacing:.2em; font-weight:700;
font-size:.75rem; color:var(--lm-accent-deep);
}
.lm-script{ font-family:var(--wp--preset--font-family--script); font-weight:400; line-height:1.6; letter-spacing:.015em; }
.lm-script.is-oneline{ line-height:1; }
/* Rothefight is a tall condensed face — a hair of tracking keeps big multi-line
headings from reading as "overlapping". Applies to every script heading. */
.lm-pc-sechead h2, .lm-pchead__title, .lm-pc-hub__title, .lm-pc-split__body h2,
.lm-pep__body h2, .lm-fieldguide-card h2, .lm-event__name, .lm-pc-fact b{ letter-spacing:.015em; }
/* editorial lead paragraph */
.lm-lead{ font-size:clamp(1.1rem, 0.95rem + 0.6vw, 1.25rem); line-height:1.5; }
/* handwritten signature — left aligned with the copy */
.lm-signature{ width:215px; margin:0.4rem auto 1.1rem 0 !important; text-align:left; }
.lm-signature img{ margin-left:0 !important; }
/* 3. EPHEMERA ------------------------------------------------- */
.lm-rotate-l{ transform:rotate(-2.2deg); }
.lm-rotate-r{ transform:rotate(2deg); }
.lm-polaroid{
background:var(--lm-white);
padding:.7rem .7rem 2.1rem;
box-shadow:var(--lm-shadow);
border:1px solid rgba(0,0,0,.04);
}
.lm-polaroid img{ display:block; }
.lm-card{
background:var(--lm-white);
border-radius:var(--lm-radius);
box-shadow:var(--lm-shadow);
overflow:hidden;
transition:transform var(--lm-dur) var(--lm-ease), box-shadow var(--lm-dur) var(--lm-ease);
}
.lm-card:hover, .lm-card:focus-within{ transform:translateY(-4px); box-shadow:var(--lm-shadow-lift); }
.lm-card .wp-block-post-featured-image img{ transition:transform .5s var(--lm-ease); }
.lm-card:hover .wp-block-post-featured-image img{ transform:scale(1.04); }
/* blog cards → scattered postcards */
.lm-postcards-grid{ overflow:visible; }
.lm-postcard-card{
position:relative; background:var(--lm-white); border-radius:3px; padding:14px; height:100%;
box-shadow:0 2px 6px -3px rgba(54,44,40,.18), 0 20px 40px -24px rgba(54,44,40,.5);
transition:transform var(--lm-dur) var(--lm-ease), box-shadow var(--lm-dur) var(--lm-ease), rotate var(--lm-dur) var(--lm-ease);
}
.lm-postcards-grid > .wp-block-post:nth-child(3n+1) .lm-postcard-card{ rotate:-1.4deg; }
.lm-postcards-grid > .wp-block-post:nth-child(3n+2) .lm-postcard-card{ rotate:0.9deg; }
.lm-postcards-grid > .wp-block-post:nth-child(3n+3) .lm-postcard-card{ rotate:-0.6deg; }
.lm-postcard-card:hover, .lm-postcard-card:focus-within{ rotate:0deg; transform:translateY(-5px); box-shadow:var(--lm-shadow-lift); z-index:2; }
.lm-postcard-card .wp-block-post-featured-image{ margin:0; border-radius:2px; overflow:hidden; box-shadow:0 0 0 1px rgba(20,12,10,.08); }
.lm-postcard-card .wp-block-post-featured-image img{ border-radius:2px; }
.lm-postcard-body{ margin-top:0.9rem; padding-top:0.9rem; border-top:1.5px dashed var(--lm-line); }
.lm-postcard-body .wp-block-post-title, .lm-postcard-body .wp-block-post-title a{ font-family:var(--wp--preset--font-family--serif); }
.lm-postcard-body .wp-block-post-excerpt__excerpt{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
/* reduced-motion / small screens: straighten the deck */
@media (max-width:781px){ .lm-postcards-grid .lm-postcard-card{ rotate:none !important; } }
/* washi tape */
.lm-tape{ position:relative; }
.lm-tape::before{
content:""; position:absolute; top:-14px; left:50%; translate:-50% 0;
width:104px; height:28px; rotate:-3deg; z-index:2;
background:color-mix(in srgb, var(--lm-accent) 52%, var(--lm-paper));
box-shadow:0 1px 4px rgba(0,0,0,.1);
border-left:1px solid rgba(255,255,255,.35); border-right:1px solid rgba(255,255,255,.35);
}
/* hand-drawn wavy divider (token-driven via mask) */
.lm-doodle{
height:34px; width:340px; max-width:60%; border:0; margin:0 auto;
background-color:var(--lm-accent-deep); opacity:.85;
-webkit-mask:center/auto 100% no-repeat url("data:image/svg+xml;utf8,");
mask:center/auto 100% no-repeat url("data:image/svg+xml;utf8,");
}
/* postmark divider + stamps */
.lm-postmark{ background:center/contain no-repeat; aspect-ratio:3/1; opacity:.85; }
.lm-stamp img{ filter:drop-shadow(0 4px 8px rgba(0,0,0,.15)); }
/* layered "grab a postcard" scene — matches the mockup */
.lm-pc-scene{ position:relative; width:min(640px,94%); margin:var(--wp--preset--spacing--40) auto 0; aspect-ratio:640/440; }
.lm-pc-scene .wp-block-image{ margin:0; }
.lm-pc-scene .wp-block-image img{ display:block; width:100%; height:auto; border-radius:inherit; }
.lm-pc-back{
position:absolute; left:0; bottom:0; width:80%; border-radius:6px; z-index:1;
rotate:-2.5deg; box-shadow:0 24px 44px -22px rgba(20,12,10,.55);
}
.lm-pc-photo{
position:absolute; right:1%; top:0; width:37%; border-radius:4px; z-index:3;
rotate:4.5deg; box-shadow:0 26px 46px -20px rgba(20,12,10,.6), 0 6px 14px -8px rgba(20,12,10,.4);
}
.lm-pc-stamp-bg{
position:absolute; right:33%; top:-4%; width:21%; z-index:0; rotate:-9deg; opacity:.6;
}
.lm-pc-ribbon{
margin:0; position:absolute; left:34%; bottom:11%; z-index:2; rotate:-7deg; white-space:nowrap;
background:var(--lm-accent); color:var(--lm-white);
font-family:var(--wp--preset--font-family--script); text-transform:uppercase;
font-size:clamp(1.05rem,2.4vw,1.55rem); line-height:1; letter-spacing:.03em;
padding:.5rem 1.3rem .65rem; box-shadow:0 8px 16px -8px rgba(20,12,10,.5);
}
@media (max-width:640px){
.lm-pc-scene{ aspect-ratio:360/400; width:100%; }
.lm-pc-back{ width:86%; }
.lm-pc-photo{ width:46%; right:0; }
.lm-pc-stamp-bg{ width:26%; right:12%; }
.lm-pc-ribbon{ font-size:1rem; left:auto; right:2%; bottom:4%; }
}
/* 4. HEADER / NAV -------------------------------------------- */
.lm-header{
position:sticky; top:0; z-index:100;
background:var(--lm-paper);
border-bottom:1px solid var(--lm-line);
}
/* NOTE: no filter/backdrop-filter/transform on the header — those create a
containing block that would trap the mobile nav's position:fixed overlay. */
.lm-header .wp-block-site-title a{ color:var(--lm-ink); text-decoration:none; transition:color var(--lm-dur) var(--lm-ease); }
.lm-header .wp-block-site-title a:hover{ color:var(--lm-accent-deep); }
.lm-header .wp-block-site-logo{ line-height:0; }
.lm-header .wp-block-site-logo img{ display:block; height:auto; width:150px; }
@media (max-width:600px){ .lm-header .wp-block-site-logo img{ width:120px; } }
.lm-header .wp-block-navigation{
font-family:var(--wp--preset--font-family--sans);
text-transform:uppercase; letter-spacing:.1em; font-size:.78rem; font-weight:600;
}
.lm-header .wp-block-navigation a{ color:var(--lm-ink); }
.lm-header .wp-block-navigation .wp-block-navigation-item__content{
text-decoration:none; position:relative; transition:color var(--lm-dur) var(--lm-ease);
}
/* Hover / current-page = COLOR CHANGE ONLY. Rothefight's tall low-dipping caps
break every underline approach (a fixed bar strikes through; a native underline
gets skip-inked into the word gaps → "PLAN_YOUR_VISIT"). Color is clean + safe. */
.lm-header .wp-block-navigation .wp-block-navigation-item__content{ text-decoration:none; transition:color var(--lm-dur) var(--lm-ease); }
.lm-header .wp-block-navigation .wp-block-navigation-item:hover .wp-block-navigation-item__content,
.lm-header .wp-block-navigation .current-menu-item .wp-block-navigation-item__content{ color:var(--lm-accent-deep); text-decoration:none; }
/* 5. SECTIONS ------------------------------------------------- */
.lm-section{ position:relative; }
.has-surface-background-color{ color:var(--lm-ink); }
.has-hero-background-color{ color:var(--lm-white); }
.has-deep-background-color{ color:var(--lm-white); }
/* paper grain on tinted bands (matches body texture) */
.has-surface-2-background-color{
color:var(--lm-ink);
background-image:radial-gradient(rgba(54,44,40,.045) 1px, transparent 1px);
background-size:22px 22px;
}
.has-surface-2-background-color .lm-eyebrow{ color:var(--lm-ink); }
/* Screen-reader-only utility */
.lm-sr-only{
position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* hero — two columns: script headline + intro on the left, a deck of Marion
greeting postcards rotating on the right. */
.lm-hero{
position:relative; overflow:clip;
min-height:min(78vh,660px); display:flex; align-items:center;
}
.lm-hero-content{
position:relative; z-index:1; width:100%;
display:flex; align-items:center; gap:clamp(2rem,5vw,4.5rem);
}
.lm-hero-text{ flex:1 1 42%; min-width:0; }
.lm-hero .lm-hero-script{
color:var(--lm-white); font-size:var(--lm-script-hero); line-height:1.6;
padding-bottom:0.12em; text-transform:uppercase; letter-spacing:.015em;
}
.lm-hero .lm-hero-sub{ color:var(--lm-white); max-width:42ch; margin-top:1.5rem !important; }
.lm-hero .lm-eyebrow{ color:var(--lm-white); }
/* the postcard deck (right column): a stack of postcards. ::before/::after are
the rest of the pile peeking out behind the top card. */
.lm-hero-deck{
position:relative; flex:1 1 54%; min-width:0; align-self:center;
aspect-ratio:66/45; isolation:isolate;
}
.lm-hero-deck::before,
.lm-hero-deck::after{
content:""; position:absolute; inset:0; z-index:0; border-radius:7px;
background:var(--lm-paper);
box-shadow:0 26px 46px -22px rgba(20,12,10,.5);
}
.lm-hero-deck::before{ transform:rotate(3.3deg) translate(14px,9px); }
.lm-hero-deck::after{ transform:rotate(-3.9deg) translate(-15px,5px); background:var(--lm-paper-2); }
/* each card = a core Image block; the figure IS the ivory postcard mat */
.lm-pc{
position:absolute; inset:0; z-index:1; margin:0;
background:var(--lm-white); padding:14px; border-radius:6px;
box-shadow:0 42px 62px -26px rgba(20,12,10,.58), 0 12px 24px -14px rgba(20,12,10,.4);
transform:translateX(110%) translateY(-3%) rotate(8deg); opacity:0;
transition:transform 1s var(--lm-ease), opacity .55s ease;
will-change:transform,opacity;
}
.lm-hero-deck > .lm-pc:nth-child(1){ --tilt:-2.4deg; }
.lm-hero-deck > .lm-pc:nth-child(2){ --tilt:1.9deg; }
.lm-hero-deck > .lm-pc:nth-child(3){ --tilt:-1.2deg; }
.lm-pc.is-in{ transform:translateX(0) rotate(var(--tilt,-2deg)); opacity:1; z-index:3; }
.lm-pc.is-out{ transform:translateX(-120%) translateY(-2%) rotate(-9deg); opacity:0; z-index:2;
transition:transform 1s var(--lm-ease), opacity .45s ease; }
.lm-pc.no-anim{ transition:none !important; }
.lm-hero-deck .lm-pc img{
display:block; width:100%; height:100%; object-fit:cover;
border-radius:2px; box-shadow:0 0 0 1px rgba(20,12,10,.10);
}
/* the "Love, Marion" signature, hand-signed into the hero's bottom-right corner */
.lm-hero-sig{
position:absolute; z-index:4; pointer-events:none; margin:0;
right:clamp(1.5rem,4vw,3.25rem); bottom:clamp(1.25rem,3vw,2rem);
width:clamp(150px,14vw,196px); rotate:-4deg; opacity:.95;
}
.lm-hero-sig img{ display:block; width:100%; height:auto;
filter:drop-shadow(0 2px 8px rgba(20,12,10,.28)); }
@media (max-width:600px){
.lm-hero-sig{ width:112px; right:1rem; bottom:1rem; }
}
/* feature trio icons */
.lm-feature-ico{ width:74px; margin:0 auto !important; }
.lm-feature-ico img{ width:100%; height:auto; display:block; }
/* valley falls cover */
.lm-vf{ position:relative; align-items:center; border-radius:18px; overflow:hidden; }
.lm-vf-stamp{ position:absolute; top:16px; right:16px; rotate:-5deg; margin:0 !important; z-index:2; width:120px; }
.lm-vf .wp-block-cover__inner-container{
position:relative; width:100%; max-width:min(560px,92%);
background:color-mix(in srgb, var(--lm-ink) 70%, transparent);
border-radius:14px; padding:clamp(1.4rem,3.5vw,2.4rem);
}
.lm-vf .wp-block-cover__image-background{ object-fit:cover; }
/* control the full-cover dim ourselves — the photo stays legible and the
text rides on the contained scrim panel above */
.lm-vf .wp-block-cover__background{ opacity:.28 !important; }
/* pill / chip */
.lm-chip{
display:inline-block; background:var(--lm-paper-2); color:var(--lm-ink);
border:1px solid var(--lm-line); border-radius:999px;
padding:.6rem 1.4rem; font-family:var(--wp--preset--font-family--sans);
font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:.75rem;
text-decoration:none;
}
/* ==========================================================================
THINGS TO DO — "Commemorative Postage Stamp" event cards
Winner: the postage stamp is a literal, named pillar of the Love, Marion
brand world, so it sits in exact conversation with the hero's ivory
greeting-postcards and the blog's perforated postcards. Grafted from the
calendar-leaf runner-up: the big DAY numeral is set in Rothefight (the
signature display face) on the teal "denomination" chip — the one place a
tall condensed face is both safe and impactful.
Every visible field is an editable core block (Image / Heading / Paragraph
/ Button). All stamp personality is CSS on classes + decoration-only
pseudo-elements & masks — NO event text ever lives in CSS. --lm-* tokens
only, so the whole card repaints with the season engine.
Clearly different from the rejected card (cream rounded box, full-bleed
photo on top, thin dashed line, small teal pill): here the photo is matted
inside a die-cut perforated stamp, the date is an engraved denomination,
and the CTA is a squared full-width action bar — no pill anywhere.
========================================================================== */
/* --- 4 / 2 / 1 grid, equal-height rows (core Columns → CSS grid) --------- */
.lm-events.wp-block-columns{
display:grid;
grid-template-columns:repeat(4, minmax(0,1fr));
gap:var(--wp--preset--spacing--30);
align-items:stretch; /* every card fills its row → equal height */
}
.lm-events > .wp-block-column{
display:flex; width:auto !important; flex-basis:auto !important; margin:0;
}
/* --- the card: flex column so the CTA pins to a shared baseline ---------- */
.lm-event{
display:flex; flex-direction:column; gap:.75rem;
width:100%; height:100%;
background:transparent; border:0; /* it's a mounted stamp on cream, not a boxed card */
}
.lm-event > *{ margin:0; }
/* --- the stamp: unmasked wrapper casts a die-cut-following drop shadow ---- */
.lm-event__stamp{
position:relative;
filter:
drop-shadow(0 2px 5px color-mix(in srgb, var(--lm-ink) 20%, transparent))
drop-shadow(0 16px 26px color-mix(in srgb, var(--lm-ink) 24%, transparent));
transition:transform var(--lm-dur) var(--lm-ease), filter var(--lm-dur) var(--lm-ease);
}
.lm-event:hover .lm-event__stamp,
.lm-event:focus-within .lm-event__stamp{
transform:translateY(-5px) rotate(-.5deg);
filter:
drop-shadow(0 4px 8px color-mix(in srgb, var(--lm-ink) 22%, transparent))
drop-shadow(0 26px 40px color-mix(in srgb, var(--lm-ink) 30%, transparent));
}
/* partial postmark cancel clipping the top-right corner — decoration only */
.lm-event__stamp::after{
content:""; position:absolute; z-index:3; pointer-events:none;
top:6px; right:6px; width:92px; height:92px;
background:repeating-radial-gradient(circle at 72% 28%,
transparent 0 6px,
color-mix(in srgb, var(--lm-ink) 55%, transparent) 6px 7.5px,
transparent 7.5px 14px);
-webkit-mask:radial-gradient(42px at 72% 28%, #000 60%, #0000 63%);
mask:radial-gradient(42px at 72% 28%, #000 60%, #0000 63%);
mix-blend-mode:multiply; opacity:.5; transform:rotate(-8deg);
}
/* --- the ivory sheet: perforated die-cut edge (robust, content-agnostic) --
Four masks, one per edge, each solid except a row of holes biting in from
that edge; mask-composite:intersect keeps the interior FULLY OPAQUE and
scallops only the four edges — the illusion never depends on what the photo
or title covers. If mask/mask-composite is unsupported it degrades to a
plain ivory rectangle (still a clean matted stamp, never broken). */
.lm-event__sheet{
--r:6px; /* perforation radius */
--s:15px; /* perforation spacing */
position:relative;
padding:12px 12px 14px;
background:var(--lm-white);
-webkit-mask:
radial-gradient(circle var(--r) at 50% 0, #0000 calc(var(--r) - .5px), #000 var(--r)) 0 0 / var(--s) 100% repeat-x,
radial-gradient(circle var(--r) at 50% 100%, #0000 calc(var(--r) - .5px), #000 var(--r)) 0 100% / var(--s) 100% repeat-x,
radial-gradient(circle var(--r) at 0 50%, #0000 calc(var(--r) - .5px), #000 var(--r)) 0 0 / 100% var(--s) repeat-y,
radial-gradient(circle var(--r) at 100% 50%, #0000 calc(var(--r) - .5px), #000 var(--r)) 100% 0 / 100% var(--s) repeat-y;
-webkit-mask-composite:source-in;
mask:
radial-gradient(circle var(--r) at 50% 0, #0000 calc(var(--r) - .5px), #000 var(--r)) 0 0 / var(--s) 100% repeat-x,
radial-gradient(circle var(--r) at 50% 100%, #0000 calc(var(--r) - .5px), #000 var(--r)) 0 100% / var(--s) 100% repeat-x,
radial-gradient(circle var(--r) at 0 50%, #0000 calc(var(--r) - .5px), #000 var(--r)) 0 0 / 100% var(--s) repeat-y,
radial-gradient(circle var(--r) at 100% 50%, #0000 calc(var(--r) - .5px), #000 var(--r)) 100% 0 / 100% var(--s) repeat-y;
mask-composite:intersect;
}
.lm-event__sheet > *{ margin:0; }
/* engraved photo, matted inside the perforated border */
.lm-event .lm-event__photo{ position:relative; z-index:1; margin:0; }
.lm-event .lm-event__photo img{
display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
border-radius:2px; filter:saturate(.96) contrast(1.02); /* faint intaglio ink */
transition:transform .5s var(--lm-ease);
}
.lm-event:hover .lm-event__photo img{ transform:scale(1.03); }
.lm-event .lm-event__photo::after{ /* thin plate keyline */
content:""; position:absolute; inset:0; border-radius:2px; pointer-events:none;
box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lm-ink) 14%, transparent);
}
/* date "denomination" chip — DAY (Rothefight) over MONTH (Gotham) */
.lm-event__denom{
position:absolute; z-index:2; top:20px; left:20px;
display:flex; flex-direction:column; align-items:center;
padding:.72rem .55rem .5rem;
background:var(--lm-accent-deep); border-radius:3px;
box-shadow:0 3px 8px -3px color-mix(in srgb, var(--lm-ink) 55%, transparent);
}
.lm-event__day{
margin:0; color:var(--lm-white);
font-family:var(--wp--preset--font-family--script); font-weight:400;
font-size:1.65rem; line-height:1; letter-spacing:.01em;
}
.lm-event__month{
margin:.6rem 0 0; color:var(--lm-white);
font-family:var(--wp--preset--font-family--sans); font-weight:700;
font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; line-height:1;
}
/* engraved serif caption = the event NAME; reserves ~2 lines so every card's
lower half — and therefore the time + CTA below — line up across the row.
The tiny teal frame-rule is the element's OWN background (decoration, no
text, never clipped by the line-clamp overflow). */
.lm-event__name{
position:relative; z-index:1;
margin:.7rem 0 .1rem; padding:.85rem .25rem 0;
text-align:center; color:var(--lm-ink);
font-family:var(--wp--preset--font-family--serif);
font-weight:600; font-size:1.12rem; line-height:1.22; letter-spacing:-.005em;
background-image:linear-gradient(var(--lm-accent), var(--lm-accent));
background-repeat:no-repeat; background-position:center top; background-size:34px 2px;
min-height:calc(2 * 1.22em + .85rem); /* reserve two lines + the rule gap */
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* the practical booking bits, printed on the cream page beneath the stamp */
.lm-event__time{
margin:.1rem 0 0; text-align:center; color:var(--lm-ink);
font-family:var(--wp--preset--font-family--sans); font-weight:600;
font-size:.74rem; letter-spacing:.13em; text-transform:uppercase;
}
.lm-event__cta{ margin-top:auto; display:flex; } /* pin to the card floor */
.lm-event__cta .wp-block-button{ width:100%; max-width:none; }
.lm-event__cta .wp-block-button__link{ /* squared full-width bar, NOT a pill */
display:flex; align-items:center; justify-content:center;
width:100%; min-height:44px; box-sizing:border-box;
padding:.72rem 1.2rem; border-radius:3px;
background:var(--lm-accent-deep); color:var(--lm-white); text-decoration:none;
font-family:var(--wp--preset--font-family--sans); font-weight:700;
font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
transition:background-color var(--lm-dur) var(--lm-ease), transform var(--lm-dur) var(--lm-ease);
}
.lm-event__cta .wp-block-button__link:hover,
.lm-event__cta .wp-block-button__link:focus{ background:var(--lm-deep); }
.lm-event a:focus-visible,
.lm-event .wp-block-button__link:focus-visible{
outline:3px solid var(--lm-ink); outline-offset:3px; border-radius:3px;
}
@media (prefers-reduced-motion:reduce){
.lm-event__stamp, .lm-event__photo img,
.lm-event__cta .wp-block-button__link{ transition:none !important; }
.lm-event:hover .lm-event__stamp,
.lm-event:focus-within .lm-event__stamp{ transform:none; }
.lm-event:hover .lm-event__photo img{ transform:none; }
}
.lm-sample-flag{
font-family:var(--wp--preset--font-family--sans); font-size:.72rem; letter-spacing:.2em;
text-transform:uppercase; color:var(--lm-ink-soft); font-weight:700;
}
/* unified button/chip/ticket motion + hover lift */
.wp-element-button, .lm-chip, .lm-ticket{
transition:background-color var(--lm-dur) var(--lm-ease), color var(--lm-dur) var(--lm-ease),
border-color var(--lm-dur) var(--lm-ease), transform var(--lm-dur) var(--lm-ease),
box-shadow var(--lm-dur) var(--lm-ease);
}
.wp-element-button:hover, .lm-chip:hover, .lm-ticket:hover{
transform:translateY(-2px); box-shadow:0 10px 20px -10px rgba(54,44,40,.5);
}
.wp-element-button:active, .lm-chip:active, .lm-ticket:active{ transform:translateY(0); box-shadow:none; }
.lm-chip:hover{ background:var(--lm-ink); color:var(--lm-white); border-color:var(--lm-ink); }
.lm-ticket:hover{ background:var(--lm-deep); color:var(--lm-white); }
/* outline button → accent family */
.wp-block-button.is-style-outline .wp-block-button__link{
background:transparent; color:var(--lm-accent-deep); border:1.5px solid var(--lm-accent-deep);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus{
background:var(--lm-accent-deep); color:var(--lm-white); border-color:var(--lm-accent-deep);
}
/* links + arrow affordance */
.lm-section a, .lm-footer a{
text-decoration-thickness:1px; text-underline-offset:3px;
transition:color var(--lm-dur) var(--lm-ease);
}
.lm-arrow{ display:inline-block; transition:transform var(--lm-dur) var(--lm-ease); }
a:hover .lm-arrow{ transform:translateX(4px); }
/* 6. FOOTER --------------------------------------------------- */
.lm-footer{
background-color:var(--lm-hero); color:var(--lm-white);
background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
background-size:22px 22px;
}
.lm-footer a{ color:var(--lm-white); }
.lm-footer :is(h1,h2,h3,h4){ color:var(--lm-white); }
.lm-footer .lm-foot-label{
font-family:var(--wp--preset--font-family--sans); text-transform:uppercase;
letter-spacing:.2em; font-size:.75rem; font-weight:700; opacity:.9;
}
.lm-footer img.lm-bridge{ width:min(420px,80%); height:auto; margin-inline:auto; display:block; }
/* welcome corner label sticker */
.wp-block-column:has(.lm-welcome-label){ position:relative; }
.lm-welcome-label{
position:absolute; right:-8px; bottom:-16px; rotate:-6deg; z-index:3;
margin:0 !important; filter:drop-shadow(0 6px 10px rgba(0,0,0,.18));
width:150px;
}
/* 7. SCROLL REVEAL + MOTION ----------------------------------
Progressive enhancement: content is VISIBLE by default; only when JS is
present (html.lm-js) do we hide it to animate in. So no-JS visitors AND the
block editor (which doesn't run this JS) always see the content. */
.lm-js .lm-reveal{
opacity:0; transform:translateY(18px);
transition:opacity .6s var(--lm-ease), transform .6s var(--lm-ease);
will-change:opacity,transform;
}
.lm-reveal.is-visible{ opacity:1; transform:none; }
/* grid containers: don't fade the whole block — stagger the children */
.lm-reveal:is(.wp-block-columns, .wp-block-post-template){ opacity:1; transform:none; transition:none; }
.lm-js .lm-reveal:is(.wp-block-columns, .wp-block-post-template) > *{
opacity:0; transform:translateY(18px);
transition:opacity .6s var(--lm-ease), transform .6s var(--lm-ease);
}
.lm-reveal.is-visible:is(.wp-block-columns, .wp-block-post-template) > *{ opacity:1; transform:none; }
.lm-reveal:is(.wp-block-columns, .wp-block-post-template) > *:nth-child(2){ transition-delay:.08s; }
.lm-reveal:is(.wp-block-columns, .wp-block-post-template) > *:nth-child(3){ transition-delay:.16s; }
.lm-reveal:is(.wp-block-columns, .wp-block-post-template) > *:nth-child(4){ transition-delay:.24s; }
@media (prefers-reduced-motion:reduce){
.lm-reveal, .lm-reveal *{ opacity:1 !important; transform:none !important; transition:none !important; }
.lm-arrow, .lm-rotate-l, .lm-rotate-r{ transition:none !important; }
.wp-element-button, .lm-chip, .lm-ticket, .lm-card, .lm-event{ transition:none !important; }
}
/* 8. RESPONSIVE ---------------------------------------------- */
/* blog 3-up grid must collapse on phones (it's a columnCount grid) */
@media (max-width:781px){
.lm-section .wp-block-post-template.is-layout-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:520px){
.lm-section .wp-block-post-template.is-layout-grid{ grid-template-columns:1fr; }
}
/* events stamps: 4-up desktop → 2-up tablet (≤1024) → 1-up phone (≤600)
(base grid + equal-height + stretch live in the events-card block above) */
@media (max-width:1024px){
.lm-events.wp-block-columns{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:600px){
.lm-events.wp-block-columns{ grid-template-columns:1fr; }
}
/* nav crowding in the mid band */
@media (min-width:600px) and (max-width:860px){
.lm-header .wp-block-navigation{ font-size:.7rem; letter-spacing:.08em; --wp--style--block-gap:0.7rem; }
}
@media (max-width:781px){
.lm-tape::before{ width:72px; }
.lm-feature-ico{ width:62px; }
.lm-rotate-l{ transform:rotate(-1.2deg); }
.lm-rotate-r{ transform:rotate(1.2deg); }
.lm-postcards .wp-block-image{ max-width:300px; margin-inline:auto; }
/* hero: single centered postcard — tighten the stack so it never overflows */
/* hero stacks: text on top, postcard deck below */
.lm-hero{ min-height:auto; }
.lm-hero-content{ flex-direction:column; align-items:flex-start; gap:0; }
.lm-hero-text{ flex-basis:auto; width:100%; }
.lm-hero-deck{ flex-basis:auto; width:100%; margin-top:2.25rem; }
.lm-hero-deck::before{ transform:rotate(3deg) translate(9px,6px); }
.lm-hero-deck::after{ transform:rotate(-3.4deg) translate(-10px,4px); }
.lm-pc{ padding:11px; }
}
@media (max-width:781px){
/* stacked footer reads cleaner left-aligned than split */
.lm-footer .has-text-align-right{ text-align:left; }
}
@media (max-width:600px){
.lm-vf-stamp{ width:84px !important; }
.lm-welcome-label{ width:104px !important; right:0; bottom:-10px; }
.lm-welcome-card{ padding:1.75rem 1.5rem !important; }
/* comfortable tap targets */
.lm-chip{ min-height:44px; display:inline-flex; align-items:center; }
.lm-ticket{ min-height:44px; }
}
/* =========================================================================
POSTCARD INTERIOR PAGES (V1 ephemera style extended to the whole site)
========================================================================= */
/* page header (rose band) */
.lm-pchead__title{ font-size:clamp(2.6rem,6.5vw,4.6rem); line-height:1.6; margin:.35rem 0 0; }
.lm-pchead__pc{ justify-self:center; max-width:340px; }
.lm-pchead__pc .lm-polaroid{ position:relative; }
.lm-pchead__pc img{ width:100%; height:auto; display:block; aspect-ratio:4/3; object-fit:cover; }
.lm-pchead__cap{ position:absolute; left:0; right:0; bottom:.55rem; text-align:center; color:var(--lm-hero); font-size:1.7rem; }
@media(max-width:781px){ .lm-pchead{ grid-template-columns:1fr !important; } .lm-pchead__pc{ display:none; } }
/* hub card grid — framed postcards */
.lm-pc-hubgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,2.6vw,2.4rem); }
.lm-pc-hub{ display:block; text-decoration:none; color:inherit; background:var(--lm-white);
border-radius:3px; padding:14px; height:100%; box-sizing:border-box;
box-shadow:0 2px 6px -3px rgba(54,44,40,.18), 0 20px 40px -24px rgba(54,44,40,.5);
transition:transform var(--lm-dur) var(--lm-ease), box-shadow var(--lm-dur) var(--lm-ease), rotate var(--lm-dur) var(--lm-ease); }
.lm-pc-hub:hover, .lm-pc-hub:focus-within{ rotate:0deg !important; transform:translateY(-5px); box-shadow:var(--lm-shadow-lift); z-index:2; position:relative; }
.lm-pc-hub__photo{ margin:0; border-radius:2px; overflow:hidden; box-shadow:0 0 0 1px rgba(20,12,10,.08); aspect-ratio:5/4; }
.lm-pc-hub__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.lm-pc-hub__body{ margin-top:.9rem; padding-top:.9rem; border-top:1.5px dashed var(--lm-line); }
.lm-pc-hub__body .lm-eyebrow{ font-size:.66rem; }
.lm-pc-hub__title{ font-family:var(--wp--preset--font-family--script); font-weight:400; font-size:1.85rem; line-height:1.5; margin:.3rem 0 .45rem; color:var(--lm-ink); }
.lm-pc-hub__desc{ font-family:var(--wp--preset--font-family--serif); font-size:1rem; line-height:1.5; color:var(--lm-ink-soft); margin:0; }
.lm-pc-hub__more{ display:inline-block; margin-top:.7rem; font-family:var(--wp--preset--font-family--sans); font-size:.78rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--lm-accent-deep); }
@media(max-width:900px){ .lm-pc-hubgrid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .lm-pc-hubgrid{ grid-template-columns:1fr; } .lm-pc-hub{ rotate:0 !important; } }
/* solid (teal) chip variant */
.lm-chip--solid{ background:var(--lm-accent-deep) !important; color:var(--lm-white) !important; box-shadow:none; }
.lm-chip--solid:hover{ background:var(--lm-ink) !important; }
/* =========================================================================
HOMEPAGE REVISIONS (postcard direction — client punch list)
========================================================================= */
/* menu — larger, Rothefight condensed caps */
.lm-header .wp-block-navigation a{
font-family:var(--wp--preset--font-family--script); text-transform:uppercase;
letter-spacing:.04em; font-size:clamp(0.95rem,1.05vw,1.15rem); line-height:1;
}
/* stamp site-logo — sits nicely in the corner */
.lm-header .wp-block-site-logo img{ width:auto; max-height:66px; }
@media(max-width:781px){ .lm-header .wp-block-site-logo img{ max-height:52px; } }
/* hero "Wish you were here" → Spectral (italic, postcard voice) */
.lm-hero .lm-hero-script{
font-family:var(--wp--preset--font-family--serif) !important; font-style:italic;
text-transform:none !important; font-weight:500;
font-size:clamp(2.6rem,6vw,4.9rem); line-height:1.04; letter-spacing:-.01em;
}
/* feature headings (Festivals / History / Food) → Gotham sans */
.lm-feature-ico ~ h3{ font-family:var(--wp--preset--font-family--sans) !important; font-weight:700; letter-spacing:.02em; }
/* =========================================================================
POSTCARD INTERIOR PAGES — full component set (splits, prose, facts, forms)
========================================================================= */
.lm-pcwrap{ max-width:1160px; margin-inline:auto; padding-inline:clamp(1.5rem,5vw,3.5rem); }
.lm-pcwrap--narrow{ max-width:760px; }
/* section head */
.lm-pc-sechead{ max-width:660px; }
.lm-pc-sechead--center{ margin-inline:auto; text-align:center; }
.lm-pc-sechead h2{ font-family:var(--wp--preset--font-family--script); font-weight:400; line-height:1.55;
font-size:clamp(2.1rem,4.6vw,3.2rem); margin:.35rem 0 0; color:var(--lm-ink); }
.lm-pc-sechead p{ font-family:var(--wp--preset--font-family--serif); font-size:clamp(1.05rem,1.4vw,1.2rem);
line-height:1.6; color:var(--lm-ink-soft); margin:.9rem 0 0; }
.has-hero-background-color .lm-pc-sechead h2, .has-hero-background-color .lm-pc-sechead p{ color:var(--lm-white); }
/* alternating photo + text split — framed like a snapshot */
.lm-pc-split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.lm-pc-split + .lm-pc-split{ margin-top:clamp(3rem,6vw,5.5rem); }
.lm-pc-split__media{ background:var(--lm-white); padding:14px 14px 16px; border-radius:3px; rotate:-1.4deg;
box-shadow:0 2px 6px -3px rgba(54,44,40,.18), 0 22px 44px -24px rgba(54,44,40,.5);
transition:rotate var(--lm-dur) var(--lm-ease), transform var(--lm-dur) var(--lm-ease); }
.lm-pc-split:nth-child(even) .lm-pc-split__media{ rotate:1.4deg; }
.lm-pc-split__media:hover{ rotate:0deg; transform:translateY(-4px); }
.lm-pc-split__media img{ display:block; width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; border-radius:2px; box-shadow:0 0 0 1px rgba(20,12,10,.08); }
.lm-pc-split--flip .lm-pc-split__media{ order:2; }
.lm-pc-split__body h2{ font-family:var(--wp--preset--font-family--script); font-weight:400; line-height:1.55;
font-size:clamp(1.9rem,3.4vw,2.6rem); margin:.4rem 0 0; color:var(--lm-ink); }
.lm-pc-split__body p{ font-family:var(--wp--preset--font-family--serif); font-size:1.08rem; line-height:1.65; color:var(--lm-ink-soft); margin:1rem 0 0; }
.lm-pc-split__body .lm-chip{ margin-top:1.5rem; }
@media(max-width:820px){ .lm-pc-split{ grid-template-columns:1fr; gap:1.75rem; } .lm-pc-split--flip .lm-pc-split__media{ order:0; } .lm-pc-split__media{ rotate:0 !important; } }
/* editorial prose */
.lm-pc-prose{ font-family:var(--wp--preset--font-family--serif); font-size:clamp(1.05rem,1.35vw,1.2rem); line-height:1.75; color:var(--lm-ink); max-width:66ch; }
.lm-pc-prose > * + *{ margin-top:1.25rem; }
.lm-pc-prose--center{ margin-inline:auto; text-align:center; }
/* quick facts */
.lm-pc-facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center; }
/* Rothefight numerals overflow their line box downward — give the number a tall
box + a hard gap so the big digits never hang into the label below. */
.lm-pc-fact b{ display:block; font-family:var(--wp--preset--font-family--script); font-size:clamp(2rem,3.4vw,2.9rem); line-height:1.5; margin-bottom:.5rem; color:var(--lm-hero); }
.has-hero-background-color .lm-pc-fact b, .has-surface-2-background-color .lm-pc-fact b{ color:var(--lm-accent-deep); }
.lm-pc-fact span{ display:block; margin-top:0; font-family:var(--wp--preset--font-family--sans); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--lm-ink-soft); }
@media(max-width:680px){ .lm-pc-facts{ grid-template-columns:1fr 1fr; gap:2rem 1.5rem; } }
/* forms (request / contact) — postcard stationery */
.lm-pc-form{ display:grid; gap:1.1rem; background:var(--lm-white); border-radius:3px; padding:clamp(1.5rem,3vw,2.4rem);
box-shadow:0 2px 6px -3px rgba(54,44,40,.18), 0 22px 44px -24px rgba(54,44,40,.5); }
.lm-pc-field{ display:flex; flex-direction:column; gap:.4rem; }
.lm-pc-field--row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.lm-pc-field label{ font-family:var(--wp--preset--font-family--sans); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--lm-ink-soft); }
.lm-pc-input, .lm-pc-form textarea, .lm-pc-form select{ width:100%; box-sizing:border-box; font:inherit; font-size:1rem;
color:var(--lm-ink); background:var(--lm-paper); border:1.5px solid var(--lm-line); border-radius:8px; padding:.8rem .95rem; }
.lm-pc-form textarea{ min-height:130px; resize:vertical; }
.lm-pc-input:focus, .lm-pc-form textarea:focus, .lm-pc-form select:focus{ outline:3px solid color-mix(in srgb, var(--lm-accent-deep) 40%, transparent); outline-offset:1px; border-color:var(--lm-accent-deep); }
.lm-pc-form__note{ font-size:.82rem; color:var(--lm-ink-soft); }
@media(max-width:600px){ .lm-pc-field--row{ grid-template-columns:1fr; } }
/* contact detail list */
.lm-pc-contact{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.lm-pc-deflist{ list-style:none; margin:1.4rem 0 0; padding:0; }
.lm-pc-deflist li{ padding:.95rem 0; border-top:1px solid var(--lm-line); }
.lm-pc-deflist li:last-child{ border-bottom:1px solid var(--lm-line); }
.lm-pc-deflist dt, .lm-pc-deflist .dt{ font-family:var(--wp--preset--font-family--sans); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--lm-ink-soft); }
.lm-pc-deflist dd, .lm-pc-deflist .dd{ margin:.3rem 0 0; font-family:var(--wp--preset--font-family--serif); font-size:1.12rem; color:var(--lm-ink); }
.lm-pc-deflist a{ color:var(--lm-accent-deep); text-decoration:none; }
@media(max-width:820px){ .lm-pc-contact{ grid-template-columns:1fr; } }
/* CTA band */
.lm-pc-cta{ text-align:center; max-width:640px; margin-inline:auto; }
/* =========================================================================
HOMEPAGE PUNCH LIST v2 — taped welcome, field-guide postcard, pepperoni,
postcard-back hero backing, button wiring cosmetics
========================================================================= */
/* "I'm so glad you're here" card — slanted, held on with tape */
.lm-welcome-card{ position:relative; rotate:-1.5deg; }
.lm-welcome-card::before, .lm-welcome-card::after{
content:""; position:absolute; width:118px; height:32px; z-index:4;
background:linear-gradient(180deg, rgba(216,203,180,.72), rgba(203,188,160,.6));
box-shadow:0 3px 7px -4px rgba(40,30,20,.5); border-left:1px solid rgba(255,255,255,.35); border-right:1px solid rgba(120,100,70,.18);
}
.lm-welcome-card::before{ top:-15px; left:30px; rotate:-6deg; }
.lm-welcome-card::after{ bottom:-15px; right:30px; rotate:-5deg; }
@media(max-width:781px){ .lm-welcome-card{ rotate:-1deg; } .lm-welcome-card::before{ left:18px; } .lm-welcome-card::after{ right:18px; } }
/* "Get your field guide" — written like the back of a postcard */
.lm-fieldguide-card{ position:relative; background:var(--lm-white); border-radius:6px; rotate:1.2deg;
padding:clamp(2rem,4vw,3rem) clamp(1.75rem,3.5vw,2.75rem) clamp(2.25rem,4vw,3rem);
box-shadow:0 3px 8px -4px rgba(54,44,40,.2), 0 30px 56px -26px rgba(54,44,40,.55);
background-image:repeating-linear-gradient(180deg, transparent 0, transparent 2.45rem, rgba(120,100,70,.09) 2.45rem, rgba(120,100,70,.09) calc(2.45rem + 1px));
}
.lm-fieldguide-card::after{ content:""; position:absolute; top:-14px; left:50%; translate:-50% 0; width:132px; height:30px; rotate:-3deg;
background:linear-gradient(180deg, rgba(216,203,180,.72), rgba(203,188,160,.6)); box-shadow:0 3px 7px -4px rgba(40,30,20,.5); }
.lm-fieldguide-card h2{ font-family:var(--wp--preset--font-family--script) !important; font-weight:400; line-height:1.5; }
.lm-fieldguide-sign{ width:200px; margin:.4rem 0 0 !important; }
.lm-fieldguide-sign img{ display:block; width:100%; height:auto; }
@media(max-width:781px){ .lm-fieldguide-card{ rotate:0deg; } }
/* Pepperoni section (replaces Valley Falls) */
.lm-pep{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.lm-pep__media{ background:var(--lm-white); padding:14px 14px 16px; border-radius:4px; rotate:-1.8deg;
box-shadow:0 3px 8px -4px rgba(54,44,40,.22), 0 30px 56px -26px rgba(54,44,40,.55);
transition:rotate var(--lm-dur) var(--lm-ease), transform var(--lm-dur) var(--lm-ease); }
.lm-pep__media:hover{ rotate:0deg; transform:translateY(-4px); }
.lm-pep__media img{ display:block; width:100%; height:auto; border-radius:2px; }
.lm-pep__body h2{ font-family:var(--wp--preset--font-family--script) !important; font-weight:400; line-height:1.55;
font-size:var(--lm-script-md); margin:.4rem 0 0; }
.lm-pep__body .lm-lead{ margin-top:1rem; }
.lm-pep__body .wp-block-buttons{ margin-top:1.5rem; }
@media(max-width:820px){ .lm-pep{ grid-template-columns:1fr; gap:1.75rem; } .lm-pep__media{ rotate:0 !important; } }
/* postcard-BACK panel behind the hero postcards (the "white space" reads as a postcard back) */
.lm-hero-deck::before{
background:var(--lm-paper) !important;
background-image:
linear-gradient(var(--lm-line) 0 0), /* center divider (positioned below) */
repeating-linear-gradient(180deg, transparent 0 22px, rgba(120,100,70,.16) 22px 23px) !important;
background-repeat:no-repeat, no-repeat !important;
background-size:1px 62%, 42% 62% !important;
background-position:47% 20%, 90% 22% !important;
border:1px solid rgba(120,100,70,.14);
}
.lm-hero-deck::before{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.4), 0 18px 40px -24px rgba(20,12,10,.45); }
/* faux stamp box, top-right of the postcard back */
.lm-hero-deck > .lm-hero-stampbox{ position:absolute; top:9%; right:8%; width:52px; height:64px; z-index:0;
border:1.5px dashed rgba(120,100,70,.4); border-radius:3px; rotate:2deg; }
@media(max-width:781px){ .lm-hero-deck > .lm-hero-stampbox{ display:none; } }
/* =========================================================================
RESERVE ASSETS — illustration cards, banners, landmark rows, ribbon labels
========================================================================= */
/* teal-engraving town cards */
.lm-illogrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,2.6vw,2.4rem); }
.lm-illocard{ display:block; text-decoration:none; color:inherit; background:var(--lm-white); border-radius:3px;
padding:1.75rem 1.5rem 1.4rem; text-align:center;
box-shadow:0 2px 6px -3px rgba(54,44,40,.18), 0 20px 40px -24px rgba(54,44,40,.5);
transition:transform var(--lm-dur) var(--lm-ease), box-shadow var(--lm-dur) var(--lm-ease), rotate var(--lm-dur) var(--lm-ease); }
.lm-illocard:hover, .lm-illocard:focus-within{ rotate:0deg !important; transform:translateY(-5px); box-shadow:var(--lm-shadow-lift); }
.lm-illocard__illus{ display:grid; place-items:center; height:158px; margin-bottom:.5rem; }
.lm-illocard__illus img{ max-height:158px; width:auto; max-width:100%; }
.lm-illocard .lm-eyebrow{ font-size:.66rem; }
.lm-illocard__t{ font-family:var(--wp--preset--font-family--script); font-weight:400; line-height:1.5; font-size:1.85rem; letter-spacing:.015em; margin:.2rem 0 .4rem; color:var(--lm-ink); }
.lm-illocard__d{ font-family:var(--wp--preset--font-family--serif); font-size:1rem; line-height:1.5; color:var(--lm-ink-soft); margin:0 0 .7rem; }
@media(max-width:900px){ .lm-illogrid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .lm-illogrid{ grid-template-columns:1fr; } .lm-illocard{ rotate:0 !important; } }
/* wide illustration banner */
.lm-illobanner{ text-align:center; }
.lm-illobanner img{ max-width:min(720px,100%); height:auto; display:block; margin:0 auto; }
.lm-illobanner figcaption{ font-family:var(--wp--preset--font-family--sans); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--lm-ink-soft); margin-top:1rem; }
/* three landmark illustrations in a row */
.lm-illusrow{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,4vw,3rem); align-items:end; }
.lm-illusrow__i{ margin:0; text-align:center; }
.lm-illusrow__i img{ width:100%; max-width:300px; height:auto; display:block; margin:0 auto; }
.lm-illusrow__i figcaption{ font-family:var(--wp--preset--font-family--serif); font-style:italic; color:var(--lm-ink-soft); font-size:.98rem; margin-top:.85rem; }
@media(max-width:700px){ .lm-illusrow{ grid-template-columns:1fr; gap:2.25rem; } }
/* ribbon label accent (sits top-right above a band's content) */
.lm-label{ width:clamp(170px,21vw,250px); margin:0 0 1.25rem auto; rotate:2.5deg; }
.lm-label img{ width:100%; height:auto; display:block; filter:drop-shadow(0 8px 16px rgba(20,12,10,.26)); }
@media(max-width:781px){ .lm-label{ rotate:-2deg; margin:0 auto 1.25rem; } }
/* postmark/stamp accent */
.lm-stamp-accent{ text-align:center; margin-bottom:clamp(1.5rem,3vw,2.5rem); }
.lm-stamp-accent img{ width:clamp(150px,18vw,210px); height:auto; display:inline-block; rotate:-4deg; filter:drop-shadow(0 6px 12px rgba(20,12,10,.18)); }
/* contact sign-off */
.lm-signoff{ text-align:center; }
.lm-signoff__label{ width:clamp(230px,34vw,380px); height:auto; display:inline-block; filter:drop-shadow(0 8px 16px rgba(20,12,10,.24)); }
/* small decorative doodles (blueberries, bird, county seal, hills, postmark) */
.lm-doodle{ text-align:center; margin:0 auto clamp(1rem,2vw,1.6rem); line-height:0; }
.lm-doodle img{ width:auto; display:inline-block; }
.lm-doodle--blue img{ height:clamp(58px,8vw,92px); }
.lm-doodle--bird img{ height:clamp(70px,9vw,108px); rotate:-4deg; }
.lm-doodle--seal img{ height:clamp(88px,11vw,128px); rotate:-6deg; }
.lm-doodle--hills img{ height:clamp(70px,10vw,120px); }
.lm-doodle--wave{ margin:clamp(1.1rem,2.4vw,1.9rem) auto; }
.lm-doodle--wave img{ height:clamp(24px,3.5vw,40px); opacity:.6; }
/* =========================================================================
CTA CONTRAST on hero (deep seasonal) bands — the accent-deep magenta chip +
magenta eyebrow read muddy on the rust/dark hero color. Use light eyebrow +
white heading + a CREAM button (pops on every dark hero: rust/green/slate).
========================================================================= */
.has-hero-background-color .lm-eyebrow{ color:var(--lm-white); opacity:.92; }
.has-hero-background-color .lm-pc-cta h2,
.has-hero-background-color .lm-signoff p{ color:var(--lm-white); }
.has-hero-background-color .lm-chip--solid{ background:var(--lm-white) !important; color:var(--lm-ink) !important; box-shadow:0 8px 22px -8px rgba(20,12,10,.5); }
.has-hero-background-color .lm-chip--solid:hover{ background:var(--lm-paper) !important; color:var(--lm-ink) !important; }
/* facts on hero bands: numbers cream, labels cream-soft */
.has-hero-background-color .lm-pc-fact b{ color:var(--lm-white) !important; }
.has-hero-background-color .lm-pc-fact span{ color:rgba(255,255,255,.8); }
/* Marion's Calendar — grid so more than 4 event stamps wrap into rows */
.lm-events{ display:grid !important; grid-template-columns:repeat(4,1fr); gap:clamp(1.25rem,2.4vw,2rem) !important; align-items:start; }
.lm-events > .wp-block-column{ width:auto !important; flex-basis:auto !important; }
@media(max-width:900px){ .lm-events{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .lm-events{ grid-template-columns:1fr; } }
/* =========================================================================
FINAL AUDIT — accessibility + design-system polish
========================================================================= */
/* Keyboard focus was invisible (~1.2:1) on the footer + dark hero bands where the
ring used --lm-deep. Use a white ring on dark grounds. */
.lm-footer :is(a, button, .wp-element-button, input, select, textarea):focus-visible,
.has-hero-background-color :is(a, button, .wp-element-button):focus-visible,
.has-deep-background-color :is(a, button, .wp-element-button):focus-visible{
outline:3px solid var(--lm-white); outline-offset:2px; border-radius:4px;
}
/* Secondary text on surface-2 bands failed AA (ink-soft ~4.1:1) — use full ink. */
.has-surface-2-background-color :is(.lm-pc-fact span, .lm-pc-split__body p, .lm-pc-hub__desc,
.lm-illocard__d, .lm-pc-prose, .lm-illobanner figcaption, .lm-pc-sechead p){ color:var(--lm-ink); }
/* Radius scale (was untokenized — one --lm-radius used once, rest hardcoded). */
:root{ --lm-r-photo:2px; --lm-r-mat:4px; --lm-r-card:8px; --lm-r-cover:16px; --lm-r-pill:999px; }
/* Touch targets: ensure nav + inline arrow links meet ~44px on mobile. */
@media(max-width:781px){
.lm-header .wp-block-navigation-item__content{ display:inline-flex; align-items:center; min-height:44px; }
}
/* visually-hidden helper (SEO/screen-reader text) */
.lm-sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* =========================================================================
NATIVE-BLOCK SUPPORT — interior pages converted to editable core blocks.
(moves former inline styles to CSS; facts use paragraphs; cards use a
stretched link because the card is a group, not an .)
========================================================================= */
.lm-pchead{ max-width:1160px; margin-inline:auto; padding-inline:clamp(1.5rem,5vw,3.5rem);
display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.has-hero-background-color .lm-pchead__title{ color:var(--lm-white); }
.lm-pchead__text .lm-lead{ max-width:40ch; margin-top:1rem; }
.lm-pchead__chip{ margin-top:1.6rem; }
.lm-polaroid .wp-block-image, .lm-pc-split__media .wp-block-image, .lm-illocard__illus .wp-block-image{ margin:0; }
/* facts: native paragraphs replace / */
.lm-pc-fact__num{ display:block; font-family:var(--wp--preset--font-family--script); font-size:clamp(2rem,3.4vw,2.9rem);
line-height:1.5; letter-spacing:.015em; margin:0 0 .5rem; color:var(--lm-hero); }
.has-surface-2-background-color .lm-pc-fact__num{ color:var(--lm-accent-deep); }
.has-hero-background-color .lm-pc-fact__num{ color:var(--lm-white); }
.lm-pc-fact__label{ display:block; margin:0; font-family:var(--wp--preset--font-family--sans);
font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--lm-ink-soft); }
.has-surface-2-background-color .lm-pc-fact__label{ color:var(--lm-ink); }
.has-hero-background-color .lm-pc-fact__label{ color:rgba(255,255,255,.82); }
/* stretched-link cards (card is a group; the title's link covers the whole card) */
.lm-pc-hub, .lm-illocard{ position:relative; }
.lm-pc-hub__title a, .lm-illocard__t a{ color:inherit; text-decoration:none; }
.lm-pc-hub__title a::after, .lm-illocard__t a::after{ content:""; position:absolute; inset:0; z-index:1; }
/* CTA (former inline styles -> classes) */
.lm-pc-cta__title{ font-family:var(--wp--preset--font-family--script); font-weight:400; line-height:1.4;
font-size:clamp(2.1rem,4.6vw,3.2rem); margin:.35rem 0 0; letter-spacing:.015em; }
.lm-pc-cta__text{ font-family:var(--wp--preset--font-family--serif); font-size:1.1rem; line-height:1.6; margin:.9rem auto 0; max-width:42ch; }
.lm-pc-cta__btn{ margin-top:1.5rem; }
/* ============================================================
MIGRATED LISTINGS (company CPT) — reuses .lm-pc-hub cards
============================================================ */
.lm-listings-block{ margin-top:clamp(2rem,4vw,3rem); }
.lm-listings-grid{ margin-top:clamp(1.5rem,3vw,2.4rem); }
.lm-listings-count{ margin-top:1.6rem; text-align:center; font-family:var(--wp--preset--font-family--sans);
font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--lm-ink-soft); }
/* placeholder tile for listings with no photo */
.lm-pc-hub__photo--none{ display:grid; place-items:center; background:
repeating-linear-gradient(135deg, rgba(54,44,40,.03) 0 10px, transparent 10px 20px), var(--lm-paper); }
.lm-pc-hub__photo--none span{ font-family:var(--wp--preset--font-family--script); text-transform:none;
font-size:1.5rem; line-height:1.15; text-align:center; color:var(--lm-hero); opacity:.7; }
/* single listing detail panel */
.lm-listing-details{ background:var(--lm-white); border-radius:3px; padding:clamp(1.4rem,3vw,2rem);
box-shadow:0 2px 6px -3px rgba(54,44,40,.18), 0 22px 44px -26px rgba(54,44,40,.45);
border-top:4px solid var(--lm-hero); max-width:640px; }
.lm-ld__title{ font-family:var(--wp--preset--font-family--script); font-weight:400; font-size:1.9rem;
line-height:1.5; margin:0 0 1rem; color:var(--lm-ink); }
.lm-ld__row{ display:grid; grid-template-columns:5.5rem 1fr; gap:1rem; padding:.7rem 0;
border-top:1.5px dashed var(--lm-line); align-items:start; }
.lm-ld__row:first-of-type{ border-top:0; }
.lm-ld__k{ font-family:var(--wp--preset--font-family--sans); font-size:.68rem; font-weight:700;
letter-spacing:.1em; text-transform:uppercase; color:var(--lm-ink-soft); padding-top:.15rem; }
.lm-ld__v{ font-family:var(--wp--preset--font-family--serif); font-size:1.02rem; line-height:1.5; color:var(--lm-ink); }
.lm-ld__v a{ color:var(--lm-accent-deep); text-decoration:none; }
.lm-ld__v a:hover{ text-decoration:underline; }
@media(max-width:520px){ .lm-ld__row{ grid-template-columns:1fr; gap:.15rem; } }
/* single listing layout */
.lm-single-listing{ display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(2rem,5vw,3.5rem); align-items:start; }
.lm-single-listing__media img{ width:100%; border-radius:3px; box-shadow:0 22px 44px -26px rgba(54,44,40,.5); }
@media(max-width:860px){ .lm-single-listing{ grid-template-columns:1fr; } }
/* guide request checkbox picker */
.lm-guide-picks{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem .9rem; margin-top:.5rem; }
.lm-guide-pick{ display:flex; align-items:center; gap:.55rem; font-family:var(--wp--preset--font-family--serif);
font-size:1rem; color:var(--lm-ink); cursor:pointer; padding:.35rem 0; }
.lm-guide-pick input{ width:1.05rem; height:1.05rem; accent-color:var(--lm-hero); flex:0 0 auto; }
@media(max-width:520px){ .lm-guide-picks{ grid-template-columns:1fr; } }
/* nav dropdown submenus (Explore / Events / Plan Your Visit) */
.lm-header .wp-block-navigation__submenu-container{
background:var(--lm-white); border:1px solid rgba(54,44,40,.08); border-radius:3px;
padding:.4rem; min-width:230px;
box-shadow:0 2px 6px -3px rgba(54,44,40,.2), 0 22px 44px -24px rgba(54,44,40,.5); }
.lm-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
font-family:var(--wp--preset--font-family--sans) !important; font-size:.86rem !important;
text-transform:none !important; letter-spacing:.01em; color:var(--lm-ink);
padding:.5rem .7rem; border-radius:2px; width:100%; }
.lm-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover{
color:var(--lm-accent-deep); background:var(--lm-paper); }
.lm-header .wp-block-navigation .wp-block-navigation-submenu__toggle{ color:inherit; }
/* nav rhythm — balance spacing now that dropdown carets are present */
.lm-header .wp-block-navigation__container{ gap:clamp(1.5rem,2.5vw,2.25rem) !important; align-items:center; }
.lm-header .wp-block-navigation__submenu-icon{
margin-left:.2em !important; margin-right:0 !important;
width:.58em !important; height:.58em !important; align-self:center; opacity:.65; }
.lm-header .wp-block-navigation .wp-block-navigation-item.has-child > .wp-block-navigation-item__content{ padding-right:0; }
/* ===== design-review fixes (2026-08-24) ===== */
/* Match listings/IA container to the site's 1160 content width (was 1048, inset) */
.lm-pcwrap{ max-width:1256px !important; padding-inline:clamp(1.25rem,4vw,48px) !important; box-sizing:border-box; }
/* Facts row: give each number a fixed box so the labels line up as a row */
.lm-pc-fact{ display:flex; flex-direction:column; align-items:center; }
.lm-pc-fact b{ display:flex !important; align-items:flex-end; justify-content:center; min-height:3.4rem; line-height:1.12; margin-bottom:.55rem; }
/* Feature icons: identical rendered height for all three */
.lm-feature-ico{ width:auto !important; height:58px; display:flex; align-items:flex-end; justify-content:center; }
.lm-feature-ico img{ width:auto !important; height:100%; max-height:58px; }
/* guide mockup floats on the band (white bg cut out) + soft shadow */
.lm-guide-float img{ filter:drop-shadow(0 16px 26px rgba(54,44,40,.32)); }
/* more air between the postcard section's text and the layered scene */
.lm-pc-scene{ margin-top:clamp(2.5rem,5vw,4rem) !important; }
/* fix: square feature icons (SVGs have viewBox but no intrinsic width) */
.lm-feature-ico{ width:60px !important; height:60px !important; display:block; margin:0 auto !important; }
.lm-feature-ico img{ width:60px !important; height:60px !important; max-height:none !important; display:block; }
/* fix: .lm-pcwrap is a constrained group — its children were capped at contentSize(620).
Force the wrap to full site width and let children fill it. */
.lm-pcwrap{ width:100% !important; max-width:1256px !important; margin-inline:auto !important; }
.lm-pcwrap > *{ max-width:100% !important; }
/* listings cards: equal height per row, CTA pinned to bottom */
.lm-pc-hubgrid{ align-items:stretch; }
.lm-pc-hub{ display:flex; flex-direction:column; }
.lm-pc-hub__body{ flex:1 1 auto; display:flex; flex-direction:column; }
.lm-pc-hub__more{ margin-top:auto; }
/* listing card is now with a stretched link */
.lm-pc-hub{ position:relative; }
.lm-pc-hub__link{ position:absolute; inset:0; z-index:1; }
.lm-pc-hub__body{ position:relative; z-index:0; }
/* facts: fixed-height number box (real class is __num, not ) so labels align */
.lm-pc-fact__num{ display:flex !important; align-items:flex-end; justify-content:center;
min-height:3.2rem; line-height:1.1; margin:0 0 .5rem !important; }
/* facts: top-align cells so the numbers line up even when a label wraps */
.lm-pc-facts{ align-items:start !important; }
.lm-pc-facts > *{ align-self:start !important; }
.lm-pc-fact{ justify-content:flex-start !important; }
/* facts: reserve 2 label lines so every cell is the same height (kills the wrap-induced misalignment) */
.lm-pc-fact__label{ min-height:2.6em; }
/* facts: kill the WP flow-layout block-gap margin on grid items (grid gap handles spacing) */
.lm-pc-facts > *{ margin-block:0 !important; margin-top:0 !important; }
/* ===== FACTS ROW — definitive clean rules (override all earlier attempts) ===== */
.lm-pc-facts{ display:grid !important; grid-template-columns:repeat(4,1fr); gap:1.5rem 1.25rem; align-items:start !important; text-align:center; }
.lm-pc-facts > *{ margin:0 !important; align-self:start !important; }
.lm-pc-fact{ display:block !important; }
.lm-pc-fact__num{ display:block !important; min-height:0 !important; line-height:1.5 !important;
margin:0 0 .35rem !important; } /* generous leading so Rothefight glyphs don't overflow */
.lm-pc-fact__label{ display:block; min-height:2.4em; margin:0 !important; line-height:1.35; } /* reserve 2 lines so all cells align */
@media(max-width:680px){ .lm-pc-facts{ grid-template-columns:1fr 1fr; gap:2rem 1.25rem; } }
/* ===== Rothefight leading fixes (design review) ===== */
/* polaroid caption: bigger white bottom margin + leading so the tall caption sits clear of the photo */
.lm-polaroid{ padding-bottom:2.7rem; }
.lm-pchead__cap{ bottom:.4rem !important; font-size:1.5rem; line-height:1.35; }
/* multi-line Rothefight hero titles: generous leading so lines don't collide */
.lm-hero .lm-script, .lm-hero h1.lm-script, .lm-pchead__title{ line-height:1.72 !important; }
/* more air after a section heading + intro before its content */
.lm-pc-sechead{ margin-bottom:clamp(2rem,4vw,3.25rem) !important; }
.lm-pc-sechead--center + *{ margin-top:0; }
/* "See all N" button under a limited listings preview */
.lm-listings-more{ text-align:center; margin-top:clamp(1.75rem,3vw,2.5rem); }
/* polaroid header caption: flow BELOW the photo (was absolute + overlapping) */
.lm-polaroid{ padding-bottom:2.1rem; } /* restore base for caption-less polaroids */
.lm-pchead__pc .lm-polaroid{ padding-bottom:1rem !important; }
.lm-pchead__cap{ position:static !important; bottom:auto !important; left:auto; right:auto;
margin:.45rem 0 0 !important; font-size:1.4rem !important; line-height:1.18 !important; }
/* guide "coming soon" card — muted */
.lm-guide-card--soon{ opacity:.72; }
.lm-guide-card--soon .lm-pc-hub__more{ color:var(--lm-ink-soft); }
/* single event page (TEC-controlled): keep flyer/content images a sensible size */
.single-tribe_events .wp-block-post-content img,
.single-tribe_events .tribe-events-single-event-description img,
.single-tribe_events .tribe-events-content img,
.single-tribe_events .tribe_events img{
max-width:440px !important; width:auto; height:auto; margin:1rem auto !important; display:block;
border-radius:3px; box-shadow:0 14px 30px -18px rgba(54,44,40,.5); }
/* single event page: hide the misleading post-date + blog chrome; center the details panel */
.single-tribe_events .wp-block-post-date,
.single-tribe_events .lm-comments,
.single-tribe_events .wp-block-post-terms{ display:none !important; }
.single-tribe_events .lm-listing-details{ margin:2rem auto 0; }
/* fix: my hero line-height:1.72 wrongly hit the HOMEPAGE hero (.lm-hero-script shares .lm-script) — restore it */
.lm-hero .lm-hero-script{ line-height:1.08 !important; }
/* listing card titles: a touch more leading so 2-line Rothefight names don't collide */
.lm-pc-hub__title{ line-height:1.6; }
/* homepage hero title — must out-specify ".lm-hero h1.lm-script" (0,2,1); restore tight leading */
.lm-hero h1.lm-hero-script{ line-height:1.08 !important; }
/* event stamp date chip: tighten the gap between the big day numeral and the month */
.lm-event__day{ line-height:.92 !important; }
.lm-event__month{ margin-top:.12rem !important; }
.lm-event__denom{ padding:.6rem .55rem .48rem !important; }
/* event date chip — CORRECTED: contain the tall day glyph, small clean gap to month (no overlap) */
.lm-event__day{ line-height:1.32 !important; margin:0 !important; }
.lm-event__month{ margin-top:.05rem !important; }
.lm-event__denom{ padding:.5rem .55rem .5rem !important; }
/* event date chip — metric-based: Rothefight digit ink = 1.57x font (big tails),
so line-height must be >=1.58 to contain them; then a small gap to the month. */
.lm-event__day{ line-height:1.62 !important; margin:0 !important; }
.lm-event__month{ margin-top:.1rem !important; }
.lm-event__denom{ padding:.5rem .55rem .45rem !important; }
/* mobile overlay: submenus are tap-to-expand accordions, not the desktop white dropdown box */
@media(max-width:781px){
.lm-header .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container{
background:transparent !important; border:0 !important; box-shadow:none !important;
min-width:0 !important; padding:.15rem 0 .35rem .85rem !important; }
.lm-header .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
font-size:1rem !important; padding:.45rem 0 !important; }
.lm-header .wp-block-navigation__responsive-container .wp-block-navigation-item__content{ font-family:var(--wp--preset--font-family--script); }
}
/* feature icons recolor with the season (were baked teal #436f68 = off-palette on Fall) */
.lm-feature-ico{ background-color:var(--lm-accent-deep);
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
-webkit-mask-position:center; mask-position:center;
-webkit-mask-size:contain; mask-size:contain; }
.lm-feature-ico img{ opacity:0 !important; }
.lm-feature-ico:has(img[src*="festivals"]){ -webkit-mask-image:url(/wp-content/themes/love-marion/assets/images/icons/festivals.svg); mask-image:url(/wp-content/themes/love-marion/assets/images/icons/festivals.svg); }
.lm-feature-ico:has(img[src*="history"]){ -webkit-mask-image:url(/wp-content/themes/love-marion/assets/images/icons/history.svg); mask-image:url(/wp-content/themes/love-marion/assets/images/icons/history.svg); }
.lm-feature-ico:has(img[src*="food"]){ -webkit-mask-image:url(/wp-content/themes/love-marion/assets/images/icons/food.svg); mask-image:url(/wp-content/themes/love-marion/assets/images/icons/food.svg); }
/* submenu parents are now