:root { --ink:#24332d; --ink-deep:#1c2721; --paper:#f6f5f0; --canvas:#e7e5de; --sage:#a8cdb7; --muted:#6b746d; --line:#cfc9be; } * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:"Work Sans",Arial,sans-serif; } a { color:inherit; } .header { width:min(1240px,calc(100% - 48px)); height:92px; margin:auto; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); } .brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:800; font-size:17px; letter-spacing:.16em; padding-left:.16em; } .brand svg { width:28px; height:22px; fill:var(--ink); } .site-link,.back-link { text-decoration:none; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } .site-link span { color:var(--sage); font-size:16px; margin-left:5px; } main { overflow:hidden; } .hero { position:relative; width:min(1240px,calc(100% - 48px)); min-height:590px; margin:auto; padding:105px 0 90px; } .hero:after { content:""; position:absolute; width:520px; height:520px; right:-165px; top:22px; border:1px solid var(--sage); border-radius:50%; opacity:.75; } .hero:before { content:"MG"; position:absolute; right:0; top:102px; color:var(--canvas); font-size:390px; font-weight:800; line-height:.6; letter-spacing:-.17em; z-index:-1; } .eyebrow { margin:0 0 19px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; } h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:"Instrument Serif",Georgia,serif; font-weight:400; } .hero h1 { max-width:830px; margin-bottom:28px; font-size:clamp(54px,7.2vw,100px); line-height:.93; letter-spacing:-.035em; } em { font-style:italic; } .hero-copy { width:min(458px,100%); color:var(--muted); font-size:16px; line-height:1.7; } .scroll-link { display:inline-flex; margin-top:46px; gap:13px; align-items:center; color:var(--ink); text-decoration:none; font-size:12px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; } .scroll-link span { width:31px; height:31px; border:1px solid var(--sage); display:grid; place-items:center; border-radius:50%; font-size:16px; } .collection { padding:90px max(24px,calc((100% - 1240px)/2)); background:var(--canvas); } .section-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:43px; } .section-heading h2 { margin:0; font-size:clamp(36px,4vw,54px); line-height:1; } .collection-count { margin:0; color:var(--muted); font-size:12px; font-weight:600; } .book-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(285px,1fr)); gap:34px; max-width:920px; } .book-card { display:grid; grid-template-columns:180px 1fr; gap:25px; align-items:start; } .book-cover { display:block; overflow:hidden; background:var(--ink-deep); box-shadow:16px 19px 26px rgba(36,51,45,.18); aspect-ratio:1 / 1.414; } .book-cover img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .35s ease; } .book-cover:hover img { transform:scale(1.04); } .book-category { color:var(--muted); margin:5px 0 12px; font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; } .book-info h3 { margin-bottom:13px; font-family:"Instrument Serif",Georgia,serif; font-size:35px; font-weight:400; line-height:.95; } .book-info > p:not(.book-category) { color:#4d5951; font-size:13px; line-height:1.65; } .book-actions { display:flex; gap:15px; align-items:center; margin-top:24px; } .read-button { padding:12px 14px; background:var(--ink); color:var(--paper); text-decoration:none; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; } .read-button span,.cta a span { margin-left:7px; color:var(--sage); font-size:16px; } .download-button { color:var(--ink); text-decoration:none; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; } .download-button span { margin-left:4px; font-size:15px; } .cta { padding:115px max(24px,calc((100% - 1240px)/2)); background:var(--ink-deep); color:var(--paper); } .cta .eyebrow { color:var(--sage); } .cta h2 { margin-bottom:24px; font-size:clamp(49px,6vw,82px); line-height:.9; } .cta p:not(.eyebrow) { width:min(390px,100%); color:#dce3d8; font-size:15px; line-height:1.7; } .cta a { display:inline-block; margin-top:28px; border-bottom:1px solid var(--sage); padding-bottom:8px; color:var(--paper); text-decoration:none; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; } footer { width:min(1240px,calc(100% - 48px)); margin:auto; min-height:118px; display:flex; align-items:center; justify-content:space-between; gap:20px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.13em; } footer a { text-decoration:none; } .footer-brand span { color:var(--sage); margin:0 4px; } .reader-page { background:var(--canvas); } .reader-main { width:min(1240px,calc(100% - 48px)); margin:0 auto; padding:66px 0 50px; } .reader-intro { max-width:745px; } .reader-intro h1 { margin-bottom:16px; font-size:clamp(47px,6vw,80px); line-height:.92; } .reader-intro > p:not(.eyebrow) { color:var(--muted); font-size:16px; line-height:1.7; } .reader-meta { display:flex; align-items:center; gap:22px; margin-top:26px; color:var(--muted); font-size:12px; font-weight:600; } .reader-download { display:inline-block; padding:12px 15px; background:var(--ink); color:var(--paper); text-decoration:none; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; } .reader-download span { color:var(--sage); font-size:15px; margin-left:6px; } .pdf-frame { height:calc(100vh - 290px); min-height:550px; margin-top:52px; overflow:hidden; border:1px solid var(--line); background:#fff; box-shadow:0 20px 40px rgba(36,51,45,.1); } .pdf-frame iframe { display:block; width:100%; height:100%; border:0; }
@media (max-width:680px) { .header,.hero,.reader-main,footer { width:calc(100% - 32px); } .header { height:72px; } .site-link { font-size:10px; } .hero { min-height:545px; padding:78px 0 80px; } .hero h1 { font-size:54px; } .hero:before { font-size:240px; top:148px; right:-7px; } .hero:after { width:310px; height:310px; right:-142px; top:110px; } .collection,.cta { padding:65px 16px; } .section-heading { display:block; } .section-heading h2 { font-size:42px; } .collection-count { margin-top:13px; } .book-card { grid-template-columns:128px 1fr; gap:18px; } .book-info h3 { font-size:29px; } .book-info > p:not(.book-category) { font-size:12px; } .book-actions { flex-wrap:wrap; gap:12px; margin-top:18px; } footer { min-height:100px; flex-direction:column; justify-content:center; align-items:flex-start; } .footer-brand { line-height:1.7; } .reader-main { padding-top:44px; } .reader-intro h1 { font-size:50px; } .reader-meta { align-items:flex-start; flex-direction:column; gap:13px; } .pdf-frame { height:calc(100vh - 340px); min-height:480px; margin-top:35px; } }