/* Cosmos source photographs remain intact; crops and blur use CSS. */ .agent-stage, .ribbon-closing { position: relative; isolation: isolate; overflow: hidden; background: var(--de-brand-100); } .agent-stage::before, .ribbon-closing::before { content: ""; position: absolute; z-index: -1; inset: -32px; background: url("assets/cosmos-folded-glass.webp") 50% 60% / cover; filter: grayscale(1) blur(18px); mix-blend-mode: luminosity; opacity: 0.38; pointer-events: none; } .ribbon-closing { background: #edf2f2; } .ribbon-closing::before { background-image: url("assets/cosmos-ribbed-glass.webp"); opacity: 0.2; filter: grayscale(1) blur(24px); } /* Full-bleed editorial interlude: five columns of copy, seven of product evidence. */ .prepared-section { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: min(960px, 100svh); scroll-margin-top: 0; background: var(--de-brand-100); } .prepared-copy { display: flex; align-items: center; padding: 88px 48px 88px max(var(--gutter), calc((100vw - 1320px) / 2)); } .prepared-copy-inner { max-width: 440px; } .prepared-copy h2 { color: var(--teal); font-size: clamp(44px, 4.45vw, 72px); line-height: 1.05; letter-spacing: -0.048em; text-wrap: initial; } .prepared-copy p { margin-top: 32px; color: var(--ink); font-size: 18px; line-height: 1.6; text-wrap: pretty; } .prepared-copy .text-link { margin-top: 36px; } .prepared-scene { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; background: var(--teal); padding: 80px clamp(32px, 5vw, 96px); } .prepared-scene::before { content: ""; position: absolute; inset: -28px; z-index: -2; background: url("assets/cosmos-ribbed-glass.webp") 48% 46% / cover; filter: grayscale(1) blur(10px); mix-blend-mode: luminosity; opacity: 0.6; pointer-events: none; } .prepared-scene::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient( 155deg, #004f5c0d 10%, #004f5c40 60%, #004f5cd9 100% ); pointer-events: none; } .prepared-entry { width: 100%; max-width: 488px; min-width: 0; background: var(--white); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; } .prepared-entry-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 22px 28px; border-bottom: 1px solid var(--line); font-size: 14px; } .prepared-entry-header > span:first-child { display: inline-flex; align-items: center; gap: 10px; } .prepared-entry-header .icon { width: 16px; height: 16px; color: var(--teal); } .prepared-status { background: var(--de-brand-100); color: var(--teal); border-radius: 4px; padding: 6px 8px; font-size: 11px; white-space: nowrap; } .prepared-entry-body { padding: 28px; } .prepared-entity { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); } .prepared-entity .avatar { width: 22px; height: 22px; font-size: 12px; } .prepared-entity time { margin-left: auto; font-size: 11px; } .prepared-entry h3 { font-size: 22px; margin-top: 34px; } .prepared-amount { margin-top: 14px; font-size: clamp(42px, 4vw, 58px); line-height: 1.1; letter-spacing: -0.055em; font-variant-numeric: tabular-nums; } .prepared-amount > span { color: #758285; } .prepared-lines { margin: 32px 0 0; border-top: 1px solid var(--line); } .prepared-lines > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); } .prepared-lines dt, .prepared-lines dd { font-size: 13px; margin: 0; } .prepared-lines small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; } .prepared-lines dd { font-variant-numeric: tabular-nums; white-space: nowrap; } .prepared-source { display: flex; gap: 8px; align-items: center; margin-top: 24px; font-size: 11px; color: var(--muted); } .prepared-source .icon { width: 14px; height: 14px; color: var(--teal); } .prepared-source > span:last-child { margin-left: auto; } html[data-capture="true"] .prepared-section { min-height: 900px; } @media (max-width: 1100px) { .prepared-copy { padding-right: 32px; } .prepared-scene { padding-inline: 32px; } .prepared-entry-header, .prepared-entry-body { padding: 22px; } } @media (max-width: 800px) { .prepared-section { grid-template-columns: 1fr; min-height: auto; } .prepared-copy { padding: 64px var(--gutter); } .prepared-copy-inner { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; max-width: none; width: 100%; align-items: start; } .prepared-copy h2 { font-size: 48px; grid-row: span 2; } .prepared-copy p { margin-top: 4px; font-size: 17px; } .prepared-copy .text-link { margin-top: 20px; align-self: end; } .prepared-scene { padding: 64px var(--gutter); } html[data-capture="true"] .prepared-section { min-height: auto; } } @media (max-width: 540px) { .prepared-copy { padding-block: 48px; } .prepared-copy-inner { display: block; } .prepared-copy h2 { font-size: 44px; } .prepared-copy p { margin-top: 24px; font-size: 16px; } .prepared-copy .text-link { margin-top: 22px; } .prepared-scene { padding-block: 40px; } .prepared-entry-header, .prepared-entry-body { padding: 20px; } .prepared-entry h3 { font-size: 20px; } .prepared-amount { font-size: 48px; } .prepared-lines > div { gap: 8px; } .prepared-source { flex-wrap: wrap; } }