.roasted-page { max-width: 1180px; margin-inline: auto; color: var(--text); }
.roasted-page h2,.roasted-page h3 { margin: 0; }
.roasted-hero { display: grid; grid-template-columns: 1.55fr 1fr; gap: 50px; align-items: center; padding: 25px 0 44px; }
.roasted-eyebrow { font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: 13px; margin: 0 0 17px; }
.roasted-hero h2 { font-family: 'Permanent Marker', cursive; font-size: clamp(38px, 5vw, 64px); line-height: 1.15; text-transform: uppercase; }
.roasted-hero h2 span { display: inline-block; background: var(--acid, #deff00); color: #151615; padding: 2px 10px 9px; transform: rotate(-2deg); }
.roasted-intro { max-width: 480px; margin: 26px 0; font-size: 20px; line-height: 1.5; }
.roasted-button { display: inline-flex; gap: 20px; justify-content: space-between; align-items: center; padding: 14px 20px; border: 1px solid #151615; border-radius: 0; background: var(--acid, #deff00); color: #151615 !important; text-decoration: none; text-transform: uppercase; font-weight: 800; font-family: inherit; cursor: pointer; font-size: 16px; line-height: 1.3; }
.roasted-button:hover { background: #c8e700; }
.roasted-button:focus-visible,.roasted-page input:focus-visible,.roasted-page textarea:focus-visible,.roasted-page summary:focus-visible { outline: 3px solid var(--teal, #08c9c0); outline-offset: 3px; }
.roasted-button:disabled { opacity: .6; cursor: wait; }
.roasted-join { display: block; margin-top: 16px; text-underline-offset: 4px; }
.roasted-art { position: relative; text-align: center; padding: 38px 16px 0; }
.roasted-art svg { max-width: 230px; width: 100%; color: var(--text); }
.roasted-art p { font-family: 'Permanent Marker', cursive; font-size: 20px; line-height: 1.4; transform: rotate(-3deg); }
.roasted-stamp { position: absolute; right: 0; top: 0; background: var(--pink, #f12797); color: #151615; font-weight: 900; font-size: 13px; padding: 12px 15px; transform: rotate(8deg); line-height: 1.25; }
.roasted-ground-rules { display: flex; gap: 18px 28px; flex-wrap: wrap; border-block: 1px solid var(--line); padding: 18px 0; margin-bottom: 35px; }
.roasted-ground-rules strong { text-transform: uppercase; }
.roasted-ground-rules span { color: var(--muted); }
.roasted-guest { padding: 8px 0 28px; }
.roasted-guest>p { max-width: 680px; font-size: 18px; }
.roasted-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 36px; }
.roasted-steps>div { border-top: 3px solid var(--teal); padding-top: 16px; }
.roasted-steps span { color: var(--muted); font-size: 13px; font-weight: 800; }
.roasted-steps h3 { margin-top: 9px; text-transform: uppercase; font-size: 20px; }
.roasted-steps p { color: var(--muted); }
.roasted-compose { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; padding: 18px 0 40px; border-bottom: 1px solid var(--line); }
.roasted-compose h2 { font-size: 32px; text-transform: uppercase; }
.roasted-compose form { display: grid; gap: 10px; }
.roasted-page label { display: block; font-weight: 700; }
.roasted-page input:not([type=hidden]):not([type=checkbox]),.roasted-page textarea { width: 100%; border: 1px solid var(--line); background: var(--surface, #ffffff); color: var(--text); font: inherit; padding: 11px 12px; border-radius: 0; min-width: 0; box-sizing: border-box; }
.roasted-page textarea { resize: vertical; }
.roasted-page small,.roasted-small { font-size: 13px; color: var(--muted); }
.roasted-consent { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 400 !important; padding: 10px 0; }
.roasted-consent input { margin-top: 5px; accent-color: var(--teal); }
.roasted-preview { max-height: 260px; max-width: 100%; object-fit: contain; justify-self: start; }
.roasted-preview[hidden] { display: none; }
.roasted-form-status { margin: 0; }
.roasted-notice { border-left: 4px solid var(--teal); padding: 14px 18px; background: var(--surface); font-weight: 700; }
.roasted-wall { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 30px; padding-top: 38px; }
.roasted-wall-heading { grid-column: 1/-1; display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.roasted-wall-heading h2 { font-size: 30px; text-transform: uppercase; }
.roasted-wall-heading>span { color: var(--muted); font-size: 14px; }
.roasted-empty { grid-column: 1/-1; text-align: center; padding: 50px 22px; border: 1px dashed var(--line); }
.roasted-empty>span { color: var(--teal); font-size: 44px; }
.roasted-empty h3 { font-size: 26px; margin: 16px 0 8px; }
.roasted-card { border: 1px solid var(--line); background: var(--surface); min-width: 0; scroll-margin-top: 24px; }
.roasted-photo { padding: 12px; border-bottom: 1px solid var(--line); }
.roasted-photo img { display: block; width: 100%; height: 340px; object-fit: contain; }
.roasted-card-body { padding: 22px; }
.roasted-byline { font-size: 14px; font-weight: 700; margin: 0 0 10px; overflow-wrap: anywhere; }
.roasted-byline span { color: var(--muted); font-weight: 400; }
.roasted-card h3 { font-size: 24px; text-transform: uppercase; overflow-wrap: anywhere; }
.roasted-caption,.roasted-reply p { white-space: normal; overflow-wrap: anywhere; }
.roasted-replies { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 14px; }
.roasted-replies summary { cursor: pointer; font-weight: 800; padding: 5px 0; }
.roasted-reply-form { display: grid; gap: 10px; padding: 20px 0; }
.roasted-reply { border-top: 1px solid var(--line); padding: 16px 0; }
.roasted-reply strong { font-size: 14px; }
.roasted-text-button { background: transparent !important; border: 0 !important; color: var(--muted) !important; font: inherit; font-size: 13px; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.roasted-remove { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 14px; }
.roasted-pagination { display: flex; justify-content: center; gap: 18px; padding: 32px 0; }
@media (max-width: 700px) { .roasted-hero { grid-template-columns: 1fr; gap: 20px; } .roasted-art { max-width: 260px; margin-inline: auto; width: 100%; } .roasted-hero h2 { font-size: 42px; } .roasted-intro { font-size: 18px; } .roasted-steps,.roasted-compose,.roasted-wall { grid-template-columns: 1fr; } .roasted-compose { gap: 24px; } .roasted-steps { gap: 20px; } .roasted-photo img { height: 290px; } .roasted-ground-rules { gap: 8px; } .roasted-button { font-size: 14px; } }

/* Roasted's botanical scrapbook design; scoped to this member community. */
.page-id-67 .bm-main { padding-top: 40px; }
.page-id-67 .entry-content { border: 0; padding: 0; margin-top: 0; background: transparent; }
.page-id-67 .bm-kicker { display: none; }
.page-id-67 .entry-title { display: inline-block; margin-bottom: 12px; font-size: 20px; background: #ff35b8; color: #111; padding: 4px 14px; transform: rotate(-3deg); }
.roasted-page { --roast-yellow: #e9ff00; --roast-pink: #ff35b8; --roast-teal: #00d6cc; }
.roasted-hero { position: relative; grid-template-columns: .95fr 1.05fr; gap: 12px; padding: 24px 0 38px; isolation: isolate; }
.roasted-hero-copy { position: relative; z-index: 1; min-width: 0; padding: 10px 0 20px; }
.roasted-eyebrow { letter-spacing: .13em; font-size: 12px; }
.roasted-hero .roasted-eyebrow { margin-bottom: 28px; }
.roasted-eyebrow>span { display: inline-block; margin-left: 8px; color: #dc0087; font-size: 24px; vertical-align: middle; }
.roasted-hero h2 { font-size: clamp(54px, 7.5vw, 98px); line-height: 1.08; letter-spacing: -.04em; }
.roasted-hero h2 span { position: relative; padding: 2px 9px 10px; background: var(--roast-yellow); transform: rotate(-3deg); white-space: nowrap; clip-path: polygon(1% 8%, 98% 0, 100% 88%, 2% 100%); }
.roasted-hero h2 em { display: inline-block; color: #007d77; font-style: normal; font-size: 1.36em; line-height: 1.03; transform: rotate(-4deg); margin: 5px 0 8px 8px; }
.roasted-tagline { display: inline-block; font-weight: 900; font-size: 18px; text-transform: uppercase; background: var(--roast-pink); color: #111; padding: 5px 10px; transform: rotate(1deg); margin: 16px 0 0; }
.roasted-intro { font-size: 18px; line-height: 1.5; max-width: 390px; margin: 22px 0 26px; }
.roasted-button { background: var(--roast-yellow); border: 2px solid #111; box-shadow: 4px 4px 0 #111; padding: 15px 19px; transition: transform .15s, box-shadow .15s; }
.roasted-button:hover { background: var(--roast-teal); box-shadow: 2px 2px 0 #111; transform: translate(2px,2px); }
.roasted-hero-button { font-size: 17px; gap: 15px; }
.roasted-hero-button>span { font-size: 28px; line-height: 1; }
.roasted-join { font-size: 15px; margin-top: 23px; text-decoration: underline; }
.roasted-art { position: relative; padding: 0; width: 100%; max-width: 640px; min-width: 0; }
.roasted-art img { display: block; width: 100%; height: auto; }
.roasted-stamp { top: 2%; right: 0; padding: 10px 13px; background: var(--roast-pink); color: #111; font-size: 14px; border: 2px solid #111; box-shadow: 3px 3px 0 #111; transform: rotate(8deg); }
.roasted-photo-caption { position: absolute; font-family: 'Permanent Marker', cursive; color: #111; font-size: clamp(15px, 2vw, 25px); line-height: 1; }
.roasted-photo-caption-sad { left: 15%; top: 62%; transform: rotate(-13deg); }
.roasted-photo-caption-good { left: 52%; top: 75%; transform: rotate(12deg); }
.roasted-ticker { display: flex; overflow: hidden; gap: 28px; padding: 10px 18px; margin: 2px 0 20px; background: var(--roast-yellow); border-block: 2px solid #111; color: #111; font-weight: 900; font-size: 17px; letter-spacing: .08em; transform: rotate(-1deg); }
.roasted-ticker span { flex: 0 0 auto; white-space: nowrap; }
.roasted-ground-rules { border: 0; border-left: 5px solid var(--roast-pink); padding: 12px 18px; margin-bottom: 36px; gap: 8px 24px; }
.roasted-ground-rules strong { font-size: 15px; }
.roasted-ground-rules span { font-size: 15px; }
.roasted-guest>h2,.roasted-compose h2,.roasted-wall-heading h2 { font-family: 'Permanent Marker', cursive; font-weight: 400; line-height: 1.25; }
.roasted-guest>h2 { font-size: clamp(25px, 3.6vw, 36px); }
.roasted-steps { gap: 24px; margin-top: 30px; }
.roasted-steps>div { position: relative; border: 2px solid var(--text); padding: 22px 20px 10px; box-shadow: 5px 5px 0 var(--roast-teal); }
.roasted-steps>div:nth-child(2) { box-shadow: 5px 5px 0 var(--roast-pink); }
.roasted-steps>div:nth-child(3) { box-shadow: 5px 5px 0 var(--roast-yellow); }
.roasted-steps span { color: #111; background: var(--roast-teal); display: inline-block; padding: 1px 8px; transform: rotate(-5deg); font-family: 'Permanent Marker', cursive; font-size: 20px; }
.roasted-steps>div:nth-child(2) span { background: var(--roast-pink); }
.roasted-steps>div:nth-child(3) span { background: var(--roast-yellow); }
.roasted-steps h3 { font-size: 20px; }
.roasted-compose form { border-top: 5px solid var(--roast-teal); padding-top: 22px; }
.roasted-wall-heading { border-bottom: 5px solid var(--roast-pink); padding-bottom: 16px; }
.roasted-card { border: 2px solid var(--text); box-shadow: 5px 5px 0 var(--roast-teal); }
.roasted-card:nth-of-type(even) { box-shadow: 5px 5px 0 var(--roast-pink); }
.roasted-empty { border: 2px dashed var(--text); }
html[data-theme="dark"] .roasted-hero h2 em { color: #00d6cc; }
@media (max-width: 700px) {
  .page-id-67 .bm-main { padding-top: 28px; }
  .roasted-hero { grid-template-columns: 1fr; gap: 4px; padding-top: 15px; }
  .roasted-hero h2 { font-size: clamp(46px, 11.5vw, 74px); }
  .roasted-hero-copy { padding-bottom: 20px; }
  .roasted-art { max-width: 520px; width: 100%; margin-inline: auto; }
  .roasted-hero .roasted-eyebrow { margin-bottom: 20px; }
  .roasted-intro { max-width: 480px; margin: 18px 0 24px; }
  .roasted-hero-button { font-size: 15px; }
  .roasted-photo-caption { font-size: clamp(16px, 4.5vw, 23px); }
  .roasted-stamp { font-size: 12px; }
  .roasted-steps { gap: 24px; }
  .roasted-ticker { font-size: 14px; }
  .roasted-ground-rules { padding-left: 13px; }
}
@media (prefers-reduced-motion: reduce) { .roasted-button { transition: none; } }