/* PATCH 23 – editorial article about historic brick marks; scoped styles only. */
.mark-page { --mark-ink:#28231d; --mark-rust:#925034; --mark-quiet:#766657; padding-bottom:86px; color:var(--mark-ink); }
.mark-breadcrumbs { display:flex; align-items:center; gap:10px; padding-block:24px; font-size:.86rem; color:#74695f; }
.mark-breadcrumbs a { text-decoration:none; } .mark-breadcrumbs a:hover { text-decoration:underline; }
.mark-hero { display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); align-items:stretch; gap:clamp(22px,5vw,64px); padding:clamp(26px,5vw,65px); background:#eee4d8; border:1px solid #e4d4c4; border-radius:24px; }
.mark-hero-copy { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.mark-kicker { font-size:.71rem; letter-spacing:.19em; text-transform:uppercase; color:#985b38; font-weight:800; margin:0 0 19px; }
.mark-hero h1 { font:800 clamp(2.45rem,4.7vw,4.65rem)/1.07 Manrope,sans-serif; letter-spacing:-.06em; margin:0 0 22px; max-width:610px; }
.mark-hero h1 em { font-style:normal; color:var(--mark-rust); }
.mark-hero-lead { font-size:clamp(1.04rem,1.6vw,1.27rem); line-height:1.75; color:#56493e; max-width:590px; margin:0 0 24px; }
.mark-hero-meta { display:flex; align-items:center; flex-wrap:wrap; gap:10px; color:#67574a; font-size:.82rem; }
.mark-hero-meta span { padding:7px 12px; background:rgba(255,255,255,.55); border:1px solid #d9c7b7; border-radius:99px; }
.mark-hero-media { min-height:380px; margin:0; border-radius:16px; overflow:hidden; background:#b18d71; position:relative; }
.mark-hero-media img { width:100%; height:100%; display:block; object-fit:cover; }
.mark-hero-media figcaption { position:absolute; bottom:0; left:0; right:0; padding:35px 18px 16px; background:linear-gradient(0deg,rgba(18,14,11,.78),transparent); color:white; font-size:.82rem; }
.mark-intro { max-width:890px; padding:76px 0 60px; margin-inline:auto; }
.mark-intro p { font-size:clamp(1.05rem,1.8vw,1.18rem); line-height:1.9; color:#524a41; }
.mark-intro p:first-of-type { margin-top:0; }
.mark-section { padding:58px 0 78px; border-top:1px solid #e4d6c8; }
.mark-section-heading { max-width:780px; margin-bottom:34px; }
.mark-section-heading h2 { font:800 clamp(2rem,3.5vw,3.1rem)/1.15 Manrope,sans-serif; letter-spacing:-.045em; margin:4px 0 16px; }
.mark-section-heading p:not(.mark-kicker) { margin:0; color:#675b51; line-height:1.8; font-size:1.05rem; }
.mark-stories-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.mark-story-card { display:flex; flex-direction:column; overflow:hidden; border:1px solid #e2d3c6; border-radius:17px; background:#fff; }
.mark-photo { display:block; overflow:hidden; position:relative; background:#eee5dd; }
.mark-photo img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.mark-photo:hover img { transform:scale(1.025); }
.mark-photo:focus-visible { outline:3px solid #99573a; outline-offset:-5px; }
.mark-story-card .mark-photo { aspect-ratio:4/3; }
.mark-zoom-symbol { position:absolute; right:10px; bottom:10px; display:grid; place-items:center; height:32px; width:32px; background:rgba(255,255,255,.78); border-radius:99px; border:1px solid rgba(255,255,255,.8); color:#322821; }
.mark-story-content { padding:20px 22px 24px; }
.mark-story-overline { margin:0 0 10px; color:#965636; font-size:.71rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.mark-story-card h3 { font:800 clamp(1.2rem,2vw,1.5rem)/1.25 Manrope,sans-serif; margin:0 0 12px; letter-spacing:-.025em; }
.mark-story-card p:last-child { margin:0; color:#61574f; line-height:1.75; font-size:.93rem; }
.mark-secondary-media { display:grid; grid-template-columns:1.2fr .8fr; gap:20px; margin-top:20px; }
.mark-photo-figure { margin:0; padding:12px; border:1px solid #e1d4c8; border-radius:16px; background:#f5efe8; }
.mark-photo-figure .mark-photo { height:235px; border-radius:10px; }
.mark-photo-figure .mark-photo img { object-fit:contain; background:#ebe0d6; }
.mark-photo-figure figcaption { margin:12px 6px 3px; color:#655a51; font-size:.88rem; }
.mark-process { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:28px; align-items:center; background:#2d2925; color:#fff; padding:clamp(24px,4vw,48px); border-radius:21px; }
.mark-process .mark-kicker { color:#dbb18c; }
.mark-process h2 { font:800 clamp(1.9rem,3.1vw,2.8rem)/1.2 Manrope,sans-serif; margin:0 0 15px; letter-spacing:-.04em; }
.mark-process p { color:#ece1d6; line-height:1.8; max-width:500px; }
.mark-process .mark-note { font-size:.83rem; color:#ccbcae; }
.mark-process-images { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:stretch; }
.mark-process-images figure { margin:0; }
.mark-process-images .mark-photo { aspect-ratio:3/4; border-radius:13px; }
.mark-process-images .mark-photo img { object-fit:contain; background:#4b4540; }
.mark-process-images figcaption { font-size:.83rem; margin-top:9px; color:#e8dbce; }
.mark-steps { margin:24px 0; padding-left:20px; color:#efe4da; line-height:1.9; }
.mark-steps li { margin-bottom:5px; }
.mark-gift { margin-top:70px; padding:clamp(25px,4vw,43px); border-radius:20px; background:#f3e6da; display:flex; gap:28px; align-items:center; justify-content:space-between; }
.mark-gift h2 { font:800 clamp(1.55rem,2.5vw,2.1rem)/1.25 Manrope,sans-serif; letter-spacing:-.035em; margin:0 0 9px; }
.mark-gift p { color:#594c42; line-height:1.75; margin:0; max-width:660px; }
.mark-gift .mark-buttons { display:flex; flex-wrap:wrap; gap:10px; }
.mark-gift .button { white-space:nowrap; }
.mark-sources { padding:36px 0 0; font-size:.88rem; color:#71665e; }
.mark-sources h2 { font-size:1rem; margin:0 0 8px; } .mark-sources p { margin:0; line-height:1.8; }
.mark-sources a { text-decoration:underline; text-underline-offset:3px; }
.mark-disclaimer { font-size:.85rem !important; color:#77695e !important; margin-top:18px; }
@media(max-width:960px) { .mark-stories-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .mark-story-card:last-child { grid-column:1/-1; } }
@media(max-width:750px) { .mark-hero { grid-template-columns:1fr; padding:26px; gap:23px; } .mark-hero-media { min-height:0; aspect-ratio:5/3; } .mark-process { grid-template-columns:1fr; } .mark-gift { align-items:flex-start; flex-direction:column; } .mark-intro { padding:50px 0 46px; } }
@media(max-width:570px) { .mark-page { padding-bottom:55px; } .mark-breadcrumbs { padding-block:18px; flex-wrap:wrap; } .mark-hero { padding:20px; border-radius:16px; } .mark-hero-media { aspect-ratio:4/3; } .mark-hero h1 { font-size:clamp(2.2rem,9vw,3.5rem); } .mark-section { padding-block:40px 55px; } .mark-stories-grid,.mark-secondary-media { grid-template-columns:1fr; } .mark-story-card:last-child { grid-column:auto; } .mark-photo-figure .mark-photo { height:auto; aspect-ratio:5/3; } .mark-process { padding:22px; } .mark-process-images { gap:9px; } .mark-process-images .mark-photo { aspect-ratio:3/4; } .mark-gift { margin-top:42px; padding:22px; } .mark-gift .button { white-space:normal; } }
@media(max-width:350px) { .mark-process-images { grid-template-columns:1fr; } .mark-process-images .mark-photo { aspect-ratio:4/3; } }
@media(prefers-reduced-motion:reduce) { .mark-photo img { transition:none; } .mark-photo:hover img { transform:none; } }