:root { --paper: #f4ede3; --cream: #fbf8f3; --ink: #30231d; --muted: #806f63; --orange: #e85d0b; --line: #d9cabc; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { min-height: 100vh; margin: 0; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
body::before, body::after { position: fixed; z-index: -1; border: 1px solid rgba(232, 93, 11, .18); border-radius: 50%; content: ''; pointer-events: none; }
body::before { width: 52vw; height: 52vw; top: -30vw; right: -16vw; }
body::after { width: 35vw; height: 35vw; bottom: -24vw; left: -15vw; }
.page { width: min(1240px, calc(100% - 64px)); min-height: 100vh; margin: auto; display: flex; flex-direction: column; }
header { display: flex; align-items: center; justify-content: space-between; padding: 30px 0; border-bottom: 1px solid var(--line); }
.logo { display: inline-flex; width: 132px; text-decoration: none; }
.logo img { display: block; width: 100%; height: auto; }
.status { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
.status::before { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); content: ''; }
main { flex: 1; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr); align-items: center; gap: clamp(50px, 9vw, 150px); padding: clamp(70px, 11vh, 140px) 5vw; }
.copy { max-width: 650px; }
.eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 28px; color: var(--orange); font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.eyebrow::before { width: 42px; height: 1px; background: var(--orange); content: ''; }
h1 { margin: 0; font: 400 clamp(4rem, 8.5vw, 9.2rem)/.83 Georgia, 'Times New Roman', serif; letter-spacing: -.085em; }
h1 em { color: var(--orange); font-style: italic; }
.lead { max-width: 405px; margin: 42px 0 0 8px; color: var(--muted); font-size: 1rem; line-height: 1.7; }
.visual { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.visual::before { position: absolute; width: 78%; height: 78%; border: 1px solid var(--line); border-radius: 50%; content: ''; }
.visual::after { position: absolute; width: 54%; height: 54%; border: 1px solid rgba(232, 93, 11, .42); border-radius: 50%; content: ''; }
.bread { position: relative; z-index: 1; width: 47%; aspect-ratio: 1.25; transform: rotate(-8deg); border-radius: 48% 52% 44% 56% / 58% 48% 52% 42%; background: #d99a62; box-shadow: inset -18px -15px 0 rgba(117, 65, 32, .12), 18px 24px 0 rgba(117, 65, 32, .08); }
.bread::before, .bread::after { position: absolute; width: 34%; height: 7%; border-radius: 99px; background: rgba(103, 52, 26, .3); content: ''; transform: rotate(-20deg); }
.bread::before { top: 27%; left: 30%; box-shadow: 16px 26px 0 rgba(103, 52, 26, .3); }
.bread::after { top: 54%; left: 25%; box-shadow: 19px 25px 0 rgba(103, 52, 26, .3); }
.stamp { position: absolute; right: 1%; bottom: 10%; display: grid; width: 92px; height: 92px; place-items: center; border: 1px solid var(--orange); border-radius: 50%; color: var(--orange); font-size: .58rem; font-weight: 700; letter-spacing: .12em; line-height: 1.5; text-align: center; text-transform: uppercase; transform: rotate(12deg); }
footer { display: flex; justify-content: space-between; padding: 24px 0 30px; border-top: 1px solid var(--line); color: var(--muted); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 700px) { .page { width: min(100% - 40px, 520px); } header { padding: 22px 0; } .status { font-size: .56rem; } main { display: flex; flex-direction: column; align-items: flex-start; gap: 35px; padding: 75px 0 55px; } h1 { font-size: clamp(4rem, 18vw, 7rem); } .lead { margin-top: 32px; } .visual { align-self: center; width: min(84vw, 360px); } footer { font-size: .58rem; } }