body .frame-guide { --fg-ivory: #f6f0e4; --fg-paper: #fffdf8; --fg-forest: #173b32; --fg-gold: #b88e4a; --fg-ink: #293630; --fg-line: #ddd0bb; width: min(1180px, calc(100% - 32px)); margin: 34px auto 72px; color: var(--fg-ink); font-family: Inter, Arial, sans-serif; }
body .frame-guide *, body .frame-guide *::before, body .frame-guide *::after { box-sizing: border-box; }
body .frame-guide img { display: block; max-width: 100%; }
body .frame-guide h1, body .frame-guide h2, body .frame-guide h3 { font-family: "Cormorant Garamond", Georgia, serif; }
body .frame-guide-hero { display: grid; grid-template-columns: .92fr 1.08fr; overflow: hidden; border: 1px solid var(--fg-line); background: var(--fg-ivory); }
body .frame-guide-hero-copy { align-self: center; padding: clamp(34px, 6vw, 76px); }
body .frame-guide-kicker { margin: 0 0 11px; color: var(--fg-gold); font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
body .frame-guide h1 { margin: 0; color: var(--fg-forest); font-size: clamp(50px, 6.5vw, 82px); font-weight: 600; letter-spacing: -.05em; line-height: .84; }
body .frame-guide h1 em { color: var(--fg-gold); font-weight: 500; }
body .frame-guide-hero-copy > p:not(.frame-guide-kicker) { max-width: 510px; margin: 28px 0; color: #5b685f; line-height: 1.7; }
body .frame-guide-actions { display: flex; flex-wrap: wrap; gap: 10px; }
body .frame-guide-button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border: 1px solid var(--fg-forest); padding: 11px 18px; background: var(--fg-forest); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-align: center; text-decoration: none; text-transform: uppercase; }
body .frame-guide-button:hover, body .frame-guide-button:focus-visible { background: #295447; } body .frame-guide-button-quiet { background: transparent; color: var(--fg-forest); }
body .frame-guide-hero-visual { position: relative; min-height: 435px; background: var(--fg-forest); } body .frame-guide-hero-visual img { width: 100%; height: 100%; object-fit: cover; }
body .frame-guide-image-caption { position: absolute; right: 14px; bottom: 13px; max-width: 265px; padding: 6px 8px; background: rgba(20, 38, 31, .83); color: #fff8ea; font-size: 10px; line-height: 1.35; }
body .frame-guide-hero-tags { position: absolute; left: 18px; bottom: 14px; display: flex; max-width: calc(100% - 310px); flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } body .frame-guide-hero-tags li { padding: 5px 8px; background: rgba(255,253,248,.88); color: var(--fg-forest); font-size: 10px; font-weight: 700; }
body .frame-guide-section { padding: clamp(48px, 7vw, 88px) clamp(19px, 5.8vw, 68px); } body .frame-guide-section h2 { margin: 0; color: var(--fg-forest); font-size: clamp(40px, 5vw, 62px); font-weight: 600; letter-spacing: -.04em; line-height: .91; } body .frame-guide-section-heading { max-width: 680px; margin-bottom: 34px; } body .frame-guide-section-heading > p:last-child { margin: 15px 0 0; color: #607068; line-height: 1.7; }
body .frame-guide-catalogue { display: grid; grid-template-columns: .78fr 1.22fr; gap: 38px; align-items: center; border-bottom: 1px solid var(--fg-line); } body .frame-guide-catalogue-card { display: grid; grid-template-columns: 50px 1fr auto; gap: 18px; align-items: center; padding: 23px; border: 1px solid var(--fg-line); background: var(--fg-paper); } body .frame-guide-catalogue-card > span { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 50%; background: var(--fg-forest); color: #f7e3b8; font: 600 18px "Cormorant Garamond", Georgia, serif; } body .frame-guide-catalogue-card h3 { margin: 0 0 6px; color: var(--fg-forest); font-size: 27px; line-height: 1; } body .frame-guide-catalogue-card p { margin: 0; color: #607068; font-size: 13px; line-height: 1.55; } body .frame-guide-text-link, body .frame-guide-style-card a, body .frame-guide-story-card-copy a { color: var(--fg-forest); font-size: 12px; font-weight: 700; white-space: nowrap; }
body .frame-guide-inspiration { background: #eee5d7; } body .frame-guide-story-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; align-items: stretch; } body .frame-guide-story-card { display: grid; grid-template-rows: 1fr auto; min-height: 385px; margin: 0; overflow: hidden; background: var(--fg-paper); } body .frame-guide-story-card img { width: 100%; height: 100%; object-fit: cover; } body .frame-guide-story-card figcaption { padding: 17px; } body .frame-guide-story-card figcaption strong { display: block; color: var(--fg-forest); font: 600 25px/1 "Cormorant Garamond", Georgia, serif; } body .frame-guide-story-card figcaption span { display: block; margin-top: 8px; color: #617067; font-size: 13px; line-height: 1.5; } body .frame-guide-story-card-copy { display: grid; grid-template-rows: 1fr; place-items: center; padding: 35px; background: var(--fg-forest); } body .frame-guide-story-card-copy h3 { margin: 0 0 14px; color: #faedcf; font-size: 45px; font-weight: 500; line-height: .91; } body .frame-guide-story-card-copy > div > p:not(.frame-guide-kicker) { color: #e0e7dc; line-height: 1.7; } body .frame-guide-story-card-copy a { color: #f5d698; } body .frame-guide-image-caption-inline { position: static; display: inline-block; margin: 15px 0 0; }
#frame-styles.frame-guide-styles { background: var(--fg-forest); } #frame-styles.frame-guide-styles h2 { color: #fff3d8; } #frame-styles.frame-guide-styles .frame-guide-section-heading > p:last-child { color: #d9e0d5; }
#frame-styles.frame-guide-styles .frame-guide-disclosure { border-color: #6f8b7e; background: var(--fg-forest); } #frame-styles.frame-guide-styles .frame-guide-disclosure > summary strong { color: #fff3d8; } #frame-styles.frame-guide-styles .frame-guide-disclosure > summary small { color: #d9e0d5; } #frame-styles.frame-guide-styles .frame-guide-disclosure > summary b { border-color: #d3a85e; color: #fff3d8; } #frame-styles.frame-guide-styles .frame-guide-disclosure[open] > summary { border-color: #6f8b7e; }
body .frame-guide-style-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } body .frame-guide-style-card { display: flex; min-height: 348px; flex-direction: column; align-items: flex-start; padding: 22px; background: var(--fg-paper); } body .frame-guide-style-art { display: grid; width: 100%; height: 125px; place-items: center; background: #d8d4c3; } body .frame-guide-style-art span { display: block; border: 9px solid #aa7c3f; background: linear-gradient(145deg, #dce5d4, #a2bcad); box-shadow: 0 0 0 2px #eedaa7; } body .frame-guide-style-art-portrait span { height: 92px; aspect-ratio: 4 / 5; } body .frame-guide-style-art-square span { height: 75px; width: 75px; } body .frame-guide-style-art-landscape span { width: 112px; aspect-ratio: 3 / 2; } body .frame-guide-style-art-canvas span { width: 116px; aspect-ratio: 3 / 2; border-width: 4px; box-shadow: 5px 5px 0 #786849; } body .frame-guide-style-code { margin: 20px 0 7px; color: var(--fg-gold); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } body .frame-guide-style-card h3 { margin: 0 0 9px; color: var(--fg-forest); font-size: 29px; line-height: .96; } body .frame-guide-style-card > p:not(.frame-guide-style-code) { margin: 0; color: #627068; font-size: 13px; line-height: 1.55; } body .frame-guide-style-card a { margin-top: auto; padding-top: 17px; }
body .frame-guide-process { border-bottom: 1px solid var(--fg-line); } body .frame-guide-process-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 0; padding: 0; list-style: none; } body .frame-guide-process-list li { display: grid; grid-template-columns: 42px 1fr; gap: 15px; } body .frame-guide-process-list li > span { color: var(--fg-gold); font: 600 24px "Cormorant Garamond", Georgia, serif; } body .frame-guide-process-list h3 { margin: 0 0 8px; color: var(--fg-forest); font-size: 27px; line-height: 1; } body .frame-guide-process-list p { margin: 0; color: #627068; font-size: 13px; line-height: 1.6; }
body .frame-guide-sizes { background: var(--fg-ivory); } body .frame-guide-size-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } body .frame-guide-size-grid section { border-top: 2px solid var(--fg-gold); padding: 17px 0; } body .frame-guide-size-grid h3 { margin: 0 0 8px; color: var(--fg-forest); font-size: 26px; line-height: 1; } body .frame-guide-size-grid p { margin: 0; color: #617067; font-size: 13px; }
body .frame-guide-footer { display: flex; justify-content: space-between; gap: 30px; align-items: center; padding: clamp(34px, 5vw, 62px) clamp(19px, 5.8vw, 68px); background: #d9c49a; } body .frame-guide-footer h2 { margin: 0 0 12px; color: var(--fg-forest); font-size: clamp(36px, 4.2vw, 54px); font-weight: 600; letter-spacing: -.04em; line-height: .9; } body .frame-guide-footer p:not(.frame-guide-kicker) { max-width: 580px; margin: 0; color: #42564d; line-height: 1.65; }
body .frame-guide-disclosure { border: 1px solid var(--fg-line); background: var(--fg-paper); } body .frame-guide-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 21px 23px; cursor: pointer; list-style: none; } body .frame-guide-disclosure > summary::-webkit-details-marker { display: none; } body .frame-guide-disclosure > summary strong { display: block; color: var(--fg-forest); font: 600 28px/1 "Cormorant Garamond", Georgia, serif; } body .frame-guide-disclosure > summary small { display: block; margin-top: 5px; color: #617067; font-size: 12px; } body .frame-guide-disclosure > summary b { display: grid; width: 31px; height: 31px; flex: 0 0 auto; place-items: center; border: 1px solid var(--fg-gold); color: var(--fg-forest); font-size: 22px; font-weight: 400; } body .frame-guide-disclosure[open] > summary { border-bottom: 1px solid var(--fg-line); } body .frame-guide-disclosure[open] > summary b { transform: rotate(45deg); } body .frame-guide-disclosure > .frame-guide-section-heading, body .frame-guide-disclosure > .frame-guide-story-grid, body .frame-guide-disclosure > .frame-guide-image-caption-inline, body .frame-guide-disclosure > .frame-guide-style-grid, body .frame-guide-disclosure > .frame-guide-process-list, body .frame-guide-disclosure > .frame-guide-size-grid { margin-left: 23px; margin-right: 23px; } body .frame-guide-disclosure > .frame-guide-section-heading { margin-top: 36px; } body .frame-guide-disclosure > .frame-guide-image-caption-inline, body .frame-guide-disclosure > .frame-guide-style-grid, body .frame-guide-disclosure > .frame-guide-process-list, body .frame-guide-disclosure > .frame-guide-size-grid { margin-bottom: 24px; }
body .frame-guide-inspiration, body .frame-guide-styles, body .frame-guide-process, body .frame-guide-sizes { padding-top: 18px; padding-bottom: 18px; }
@media (max-width: 900px) { body .frame-guide-hero, body .frame-guide-catalogue { grid-template-columns: 1fr; } body .frame-guide-hero-visual { min-height: 365px; } body .frame-guide-style-grid { grid-template-columns: repeat(2, 1fr); } body .frame-guide-story-grid { grid-template-columns: 1fr 1fr; } body .frame-guide-story-card-copy { grid-column: span 2; min-height: 250px; } body .frame-guide-process-list { grid-template-columns: 1fr; max-width: 560px; } }
@media (max-width: 520px) { body .frame-guide { width: min(100% - 20px, 1180px); margin-top: 14px; } body .frame-guide-hero-copy, body .frame-guide-section { padding-left: 20px; padding-right: 20px; } body .frame-guide-hero-visual { min-height: 290px; } body .frame-guide-hero-tags { max-width: calc(100% - 30px); } body .frame-guide-image-caption { right: 9px; bottom: 9px; max-width: 195px; } body .frame-guide-catalogue-card { grid-template-columns: 44px 1fr; gap: 13px; } body .frame-guide-catalogue-card > a { grid-column: 1 / -1; } body .frame-guide-story-grid, body .frame-guide-style-grid, body .frame-guide-size-grid { grid-template-columns: 1fr; } body .frame-guide-story-card-copy { grid-column: auto; } body .frame-guide-story-card { min-height: 325px; } body .frame-guide-story-card-copy { min-height: 275px; } body .frame-guide-footer { display: grid; padding: 40px 20px; } }

/* Keep the complete generated portraits visible instead of cropping family members. */
body .frame-guide h1 { font-size: clamp(46px, 5vw, 70px); line-height: .98; }
body .frame-guide-hero-copy { padding: clamp(28px, 4vw, 52px); }
body .frame-guide-hero-visual { display: flex; flex-direction: column; justify-content: center; padding: 20px; min-height: 0; background: #e9dfcf; }
body .frame-guide-hero-visual img { width: 100%; height: auto; object-fit: contain; }
body .frame-guide-image-caption { position: static; max-width: none; margin-top: 10px; padding: 0; background: transparent; color: #47534a; }
body .frame-guide-hero-tags { position: static; max-width: none; margin-top: 12px; }
body .frame-guide-story-card img { object-fit: contain; background: #e5d8c3; }
body .frame-guide-style-art span { background: url('/assets/illustrations/frame-stories/family-convo-ai-v1.jpg') center / cover no-repeat; }
body .frame-guide #frame-styles h2 { color: #f6e4bd !important; }
@media(max-width:520px) { body .frame-guide-hero-visual { padding: 12px; } }

.frame-guide [id] { scroll-margin-top: 100px; }
.frame-guide-disclosure > summary:focus-visible { outline: 3px solid #a87e39; outline-offset: 3px; }