@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");
:root { --canvas:#fbf9f6; --paper:#fff; --ink:#1b1c1a; --muted:#706b65; --line:#e8e4df; --accent:#c4a480; --deep:#2f302e; --max:1360px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; min-width:320px; color:var(--ink); background:var(--canvas); font-family:"Plus Jakarta Sans", "PingFang SC", sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; } a { color:inherit; text-decoration:none; } img { display:block; max-width:100%; } button,input { font:inherit; }
.top-note { padding:9px 16px; color:var(--muted); background:#efeeeb; font-size:10px; font-weight:700; letter-spacing:.1em; text-align:center; text-transform:uppercase; } .site-header { position:sticky; top:0; z-index:20; border-bottom:1px solid var(--line); background:rgba(251,249,246,.94); backdrop-filter:blur(12px); } .nav-wrap { display:flex; width:min(calc(100% - 64px), var(--max)); min-height:82px; align-items:center; gap:36px; margin:auto; }
.brand-lockup { display:flex; align-items:center; gap:12px; min-width:250px; } .brand-lockup img { width:52px; height:34px; object-fit:contain; } .brand-name { display:grid; gap:0; font-family:"Playfair Display",serif; font-size:20px; letter-spacing:.08em; text-transform:uppercase; } .brand-sub { color:var(--accent); font-family:"Plus Jakarta Sans",sans-serif; font-size:9px; font-weight:700; letter-spacing:.16em; } .main-nav { display:flex; flex:1; justify-content:center; gap:28px; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } .main-nav a { padding:30px 0 25px; border-bottom:1px solid transparent; } .main-nav a:hover,.main-nav a.active { color:var(--ink); border-color:var(--accent); } .nav-actions { display:flex; align-items:center; gap:16px; margin-left:auto; white-space:nowrap; } .nav-icon { display:grid; width:30px; height:30px; place-items:center; border:0; color:var(--muted); background:transparent; cursor:pointer; font-size:16px; } .language-btn { padding:8px 0; color:var(--muted); border:0; border-bottom:1px solid transparent; background:transparent; cursor:pointer; font-size:9px; font-weight:700; letter-spacing:.12em; } .language-btn:hover { color:var(--ink); border-color:var(--accent); } .amazon-btn,.dark-btn { display:inline-flex; min-height:42px; align-items:center; gap:9px; padding:0 16px; color:#fff; background:var(--ink); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; transition:background .25s ease, transform .25s ease; } .amazon-btn:hover,.dark-btn:hover { background:#3b3c39; transform:translateY(-2px); } .menu-btn { display:none; border:0; background:transparent; color:var(--ink); cursor:pointer; } .mobile-nav { display:none; }
.container { width:min(calc(100% - 64px), var(--max)); margin-inline:auto; } .eyebrow { margin:0 0 16px; color:var(--accent); font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; } .display { margin:0; font-family:"Playfair Display", Georgia, serif; font-size:clamp(48px, 5.2vw, 76px); font-weight:400; letter-spacing:0; line-height:1.08; } .display em,.title em { color:var(--accent); font-style:italic; } .lede { max-width:560px; margin:22px 0 0; color:var(--muted); font-size:15px; }
.hero { min-height:700px; display:grid; grid-template-columns:1.02fr .98fr; align-items:center; gap:72px; padding:76px 0 88px; } .hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:22px; margin-top:34px; } .link-btn { color:var(--ink); border-bottom:1px solid var(--ink); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } .link-btn:hover { color:var(--accent); border-color:var(--accent); } .hero-meta { display:flex; gap:22px; margin-top:74px; color:var(--muted); font-size:10px; letter-spacing:.08em; text-transform:uppercase; } .hero-meta strong { color:var(--accent); } .hero-visual { position:relative; min-height:540px; } .hero-visual-main { position:absolute; right:0; bottom:0; width:76%; height:84%; padding:24px; background:#f0ede8; } .hero-visual-main img { width:100%; height:100%; object-fit:cover; } .hero-visual-small { position:absolute; top:0; left:0; width:43%; height:45%; padding:15px; background:#fff; box-shadow:0 16px 32px rgba(27,28,26,.08); transform:rotate(-4deg); } .hero-visual-small img { width:100%; height:100%; object-fit:cover; } .hero-caption { position:absolute; right:-10px; bottom:30px; padding:12px 14px; color:var(--ink); background:rgba(251,249,246,.92); border:1px solid var(--line); font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } .band { padding:16px 0; color:#fff; background:var(--deep); font-family:"Playfair Display",serif; font-size:18px; font-style:italic; text-align:center; }
.section { padding:110px 0; } .section.soft { background:#f5f3f0; } .section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:34px; margin-bottom:38px; } .section-head > p { max-width:410px; margin:0; color:var(--muted); font-size:13px; } .title { margin:0; font-family:"Playfair Display",serif; font-size:clamp(38px,4.3vw,60px); font-weight:400; letter-spacing:0; line-height:1.1; } .art-grid { display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:24px; } .art-card { min-width:0; } .art-card.tall { grid-row:span 2; } .art-frame { position:relative; overflow:hidden; padding:16px; background:#fff; border:1px solid var(--line); } .art-card.tall .art-frame { height:650px; } .art-card:not(.tall) .art-frame { height:300px; } .art-frame img { width:100%; height:100%; object-fit:cover; transition:transform .55s ease; } .art-card:hover .art-frame img { transform:scale(1.04); } .art-tag { position:absolute; top:26px; left:26px; padding:5px 8px; color:var(--muted); background:rgba(255,255,255,.9); font-size:9px; font-weight:700; letter-spacing:.12em; } .art-info { display:flex; align-items:flex-start; justify-content:space-between; padding-top:16px; border-bottom:1px solid var(--line); } .art-kicker { margin:0 0 6px; color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; } .art-info h3 { margin:0 0 14px; font-family:"Playfair Display",serif; font-size:23px; font-weight:400; line-height:1.15; } .art-arrow { color:var(--accent); font-size:26px; } .art-desc { margin:10px 0 0; color:var(--muted); font-size:12px; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:74px; align-items:center; } .split-media { padding:24px; background:#fff; border:1px solid var(--line); } .split-media img { width:100%; aspect-ratio:4/3; object-fit:cover; } .feature-list { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:46px; } .feature { padding-top:20px; border-top:1px solid var(--ink); } .feature span { color:var(--accent); font-size:11px; font-weight:700; } .feature h3 { margin:24px 0 8px; font-family:"Playfair Display",serif; font-size:24px; font-weight:400; } .feature p { margin:0; color:var(--muted); font-size:12px; }
.footer { padding:65px 0 24px; background:#efeeeb; } .footer-grid { display:grid; grid-template-columns:1.35fr .8fr .8fr 1fr; gap:40px; padding-bottom:52px; border-bottom:1px solid var(--line); } .footer-copy { max-width:350px; color:var(--muted); font-size:12px; } .footer-title { margin:0 0 18px; font-size:10px; letter-spacing:.12em; text-transform:uppercase; } .footer-links { display:grid; gap:9px; color:var(--muted); font-size:12px; } .footer-links a:hover { color:var(--ink); } .newsletter { display:flex; border-bottom:1px solid var(--ink); } .newsletter input { width:100%; padding:10px 0; border:0; outline:0; color:var(--ink); background:transparent; font-size:12px; } .newsletter button { padding:0 0 0 12px; border:0; background:transparent; cursor:pointer; } .footer-bottom { display:flex; justify-content:space-between; gap:24px; padding-top:19px; color:var(--muted); font-size:10px; }
.gallery-hero,.detail-hero,.about-hero { padding:86px 0 70px; border-bottom:1px solid var(--line); } .gallery-hero .section-head,.about-hero .section-head { margin-bottom:0; } .filters { display:flex; flex-wrap:wrap; gap:10px; margin:30px 0 38px; } .filter { padding:10px 14px; color:var(--muted); border:1px solid var(--line); background:transparent; cursor:pointer; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } .filter.active,.filter:hover { color:#fff; border-color:var(--ink); background:var(--ink); } .filter-panel.hidden { display:none; } .catalog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:58px 24px; } .catalog-card .art-frame { height:410px; } .catalog-card:nth-child(2n) .art-frame { margin-top:56px; } .catalog-card h3 { margin:15px 0 4px; font-family:"Playfair Display",serif; font-size:23px; font-weight:400; } .catalog-card p { margin:0; color:var(--muted); font-size:11px; }
.detail-layout { display:grid; grid-template-columns:1.05fr .95fr; gap:82px; align-items:start; } .detail-gallery { display:grid; grid-template-columns:86px 1fr; gap:16px; } .thumbs { display:grid; align-content:start; gap:12px; } .thumb { padding:5px; border:1px solid var(--line); background:#fff; cursor:pointer; } .thumb.active { border-color:var(--accent); } .thumb img { aspect-ratio:1; object-fit:cover; } .detail-main-image { padding:28px; background:#f0ede8; border:1px solid var(--line); } .detail-main-image img { width:100%; aspect-ratio:1; object-fit:cover; } .detail-copy h1 { margin:0; font-family:"Playfair Display",serif; font-size:clamp(42px,4.5vw,68px); font-weight:400; line-height:1.05; } .detail-copy .sub { margin:15px 0 0; color:var(--muted); font-size:12px; } .price { margin:32px 0 24px; font-family:"Playfair Display",serif; font-size:28px; } .price small { color:var(--muted); font-family:"Plus Jakarta Sans",sans-serif; font-size:10px; } .specs { margin:32px 0; border-top:1px solid var(--line); } .spec-row { display:flex; justify-content:space-between; gap:20px; padding:13px 0; border-bottom:1px solid var(--line); font-size:11px; } .spec-row span:last-child { color:var(--muted); text-align:right; } .detail-note { padding:17px; background:#f5f3f0; color:var(--muted); font-size:11px; }
.about-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:80px; align-items:center; } .about-grid img { width:100%; aspect-ratio:4/3; object-fit:cover; } .manifesto { max-width:620px; margin:0 auto; padding:100px 0; text-align:center; } .manifesto p { color:var(--muted); font-size:15px; } .craft-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .craft-card { background:#fff; border:1px solid var(--line); } .craft-card img { width:100%; aspect-ratio:4/3; object-fit:cover; } .craft-card div { padding:20px; } .craft-card h3 { margin:0 0 8px; font-family:"Playfair Display",serif; font-size:21px; font-weight:400; } .craft-card p { margin:0; color:var(--muted); font-size:11px; }
@media (max-width:960px) { .nav-wrap { width:min(calc(100% - 32px), var(--max)); min-height:68px; } .brand-lockup { min-width:0; } .brand-lockup img { width:44px; } .main-nav { display:none; } .nav-actions .nav-icon { display:none; } .menu-btn { display:block; } .mobile-nav { position:absolute; top:100%; right:16px; left:16px; display:grid; gap:18px; max-height:0; overflow:hidden; padding:0 18px; background:var(--canvas); border:1px solid transparent; transition:max-height .25s ease,padding .25s ease; } .mobile-nav.open { max-height:260px; padding:20px 18px; border-color:var(--line); } .mobile-nav a { font-size:12px; } .container { width:min(calc(100% - 32px), var(--max)); } .hero { grid-template-columns:1fr; gap:40px; padding:62px 0 70px; } .hero-visual { min-height:470px; } .section { padding:78px 0; } .art-grid,.catalog-grid { grid-template-columns:1fr 1fr; } .art-card.tall { grid-row:auto; } .art-card.tall .art-frame,.art-card:not(.tall) .art-frame,.catalog-card .art-frame { height:380px; } .split,.detail-layout,.about-grid { grid-template-columns:1fr; gap:42px; } .feature-list { grid-template-columns:1fr 1fr; } .craft-grid { grid-template-columns:1fr 1fr; } .footer-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:600px) { .top-note { font-size:8px; } .brand-name { font-size:16px; } .brand-sub { font-size:7px; } .amazon-btn { min-height:36px; padding:0 10px; font-size:8px; } .hero { min-height:0; padding:55px 0 60px; } .display { font-size:46px; } .lede { font-size:13px; } .hero-meta { margin-top:45px; font-size:8px; } .hero-visual { min-height:330px; } .hero-visual-main { width:80%; height:82%; padding:14px; } .hero-visual-small { width:45%; height:48%; padding:9px; } .hero-caption { right:-3px; bottom:11px; font-size:7px; } .section-head { display:block; } .section-head > p { margin-top:20px; } .section { padding:66px 0; } .art-grid,.catalog-grid,.feature-list,.craft-grid,.footer-grid { grid-template-columns:1fr; } .art-card.tall .art-frame,.art-card:not(.tall) .art-frame,.catalog-card .art-frame { height:390px; } .catalog-card:nth-child(2n) .art-frame { margin-top:0; } .footer-bottom { display:grid; gap:10px; } .detail-gallery { grid-template-columns:1fr; } .thumbs { grid-template-columns:repeat(4,1fr); order:2; } .detail-main-image { padding:16px; } .gallery-hero,.detail-hero,.about-hero { padding:58px 0 50px; } }