:root {
  --paper: #f6f1e7;
  --paper-deep: #e9e2d4;
  --ink: #222820;
  --ink-soft: #51564e;
  --moss: #25332e;
  --burgundy: #7a403f;
  --rule: #cfc5b4;
  --sans: 'DM Sans', Arial, sans-serif;
  --serif: 'Playfair Display', Georgia, serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background-color: var(--paper); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%237a403f' stroke-opacity='.11' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='45' cy='39' r='2.5'/%3E%3Cpath d='M45 36c-4-5-1-10 0-11 1 1 4 6 0 11ZM48 39c5-4 10-1 11 0-1 1-6 4-11 0ZM45 42c4 5 1 10 0 11-1-1-4-6 0-11ZM42 39c-5 4-10 1-11 0 1-1 6-4 11 0ZM47 37c1-6 7-7 9-7 0 2-1 8-7 9M43 41c-1 6-7 7-9 7 0-2 1-8 7-9M47 41c6 1 7 7 7 9-2 0-8-1-9-7M43 37c-6-1-7-7-7-9 2 0 8 1 9 7M45 53v14M45 60c-5-1-7-4-8-7M45 63c5-1 7-4 8-7'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='78' viewBox='0 0 78 78'%3E%3Cg fill='none' stroke='%2325332e' stroke-opacity='.08' stroke-width='1' stroke-linecap='round'%3E%3Ccircle cx='39' cy='32' r='2'/%3E%3Cpath d='M39 30c-3-5 0-8 0-9 1 1 4 5 1 9M41 32c5-3 8 0 9 1-1 1-5 3-9 0M39 34c3 5 0 8 0 9-1-1-4-5-1-9M37 32c-5 3-8 0-9-1 1-1 5-3 9 0M39 43v13M39 49c-4 0-6-3-7-5M39 52c4-1 6-3 7-6'/%3E%3C/g%3E%3C/svg%3E"); background-size: 460px 560px, 620px 720px; background-position: 4% 120px, 78% 360px; color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; }
a { color: inherit; }
.site-header { min-height: 74px; padding: 0 clamp(24px, 6vw, 92px); border-bottom: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; gap: 24px; position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(10px); }
.wordmark { font-family: var(--serif); text-decoration: none; font-size: 20px; line-height: 1; }
.wordmark span { display: block; font-family: var(--sans); font-size: 8px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; margin: 5px 0 0 2px; }
.header-nav, .footer-nav { display: flex; gap: 22px; }
.header-nav a, .footer-nav a { color: var(--ink-soft); font-size: 13px; text-decoration: none; }
.header-nav a:hover, .footer-nav a:hover { color: var(--burgundy); }
.hero { min-height: min(700px, calc(100vh - 74px)); padding: clamp(68px, 10vw, 142px) clamp(24px, 10vw, 152px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, .85fr); align-items: center; gap: clamp(45px, 8vw, 130px); overflow: hidden; }
.hero-copy { position: relative; z-index: 1; max-width: 590px; }
.eyebrow { color: var(--burgundy); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 20px; display: flex; align-items: center; gap: 9px; }
.eyebrow span { height: 1px; width: 29px; background: currentColor; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-family: var(--serif); font-size: clamp(48px, 6.4vw, 92px); line-height: .98; font-weight: 500; letter-spacing: -.055em; margin: 0; }
h1 em { color: var(--burgundy); font-style: italic; }
.type-label { display: inline-block; border-bottom: 1px solid var(--moss); color: var(--moss); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 23px 0 5px; margin: 0; }
.intro { color: var(--ink-soft); font-size: 18px; margin: 24px 0 31px; }
.button { display: inline-block; border: 1px solid transparent; border-radius: 3px; font: 600 13px var(--sans); letter-spacing: .02em; padding: 13px 19px; cursor: pointer; text-decoration: none; transition: transform .2s ease, background-color .2s ease, color .2s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--moss); color: #fff; }
.button-primary:hover { background: var(--burgundy); }
.button-secondary { background: transparent; color: var(--moss); border-color: var(--moss); padding: 9px 13px; font-size: 12px; }
.button-secondary:hover { background: var(--moss); color: #fff; }
/* BUSSI_ILLUSTRATION_CSS_START */
.book-scene { min-height: 405px; position: relative; margin: 0; isolation: isolate; }
.book-scene::before { content: ''; position: absolute; inset: 22px 0 0 0; border: 1px solid var(--rule); background: var(--paper-deep); z-index: -1; }
.book-scene::after { content: ''; position: absolute; height: 1px; background: var(--burgundy); width: 92px; top: 0; right: 34px; }
.store-photo { position: absolute; overflow: hidden; border: 1px solid var(--rule); background: var(--paper-deep); }
.store-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.store-photo-main { inset: 43px 42px 55px 24px; }
.store-photo-main img { object-position: 50% 61%; }
.store-photo-detail { width: 43%; height: 42%; right: 0; bottom: 36px; border: 5px solid var(--paper); box-shadow: 0 8px 24px rgba(34,40,32,.16); }
.store-photo-detail img { object-position: 52% 45%; }
.book-scene figcaption { position: absolute; left: 0; bottom: 5px; max-width: 260px; margin: 0; padding: 10px 15px 9px 0; background: var(--paper); color: var(--ink); font: italic 17px/1.25 var(--serif); }
.book-scene figcaption span { display: block; color: var(--burgundy); font: 600 9px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 5px; }
/* BUSSI_ILLUSTRATION_CSS_END */
.browse { border-top: 1px solid var(--rule); padding: 44px clamp(24px, 10vw, 152px); display: grid; grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr); align-items: end; gap: clamp(30px, 6vw, 90px); }
.browse .eyebrow { margin-bottom: 13px; }
.browse h2 { font: 500 clamp(29px, 3vw, 40px)/1.05 var(--serif); letter-spacing: -.035em; margin: 0; }
.genre-list { display: flex; flex-wrap: wrap; gap: 9px; padding-bottom: 2px; }
.genre-list span { border: 1px solid var(--rule); border-radius: 999px; color: var(--moss); background: color-mix(in srgb, var(--paper-deep) 55%, transparent); font-size: 12px; font-weight: 600; letter-spacing: .03em; padding: 8px 13px; }
.testimonials { border-top: 1px solid var(--rule); padding: clamp(64px, 8vw, 96px) clamp(24px, 10vw, 152px); display: grid; grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr); align-items: start; gap: clamp(30px, 6vw, 90px); }
.testimonials .eyebrow { margin-bottom: 13px; }
.testimonials h2 { font: 500 clamp(29px, 3vw, 40px)/1.05 var(--serif); letter-spacing: -.035em; margin: 0; }
.review-rotator { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 25px 0 17px; min-width: 0; }
.review-slides { min-height: 142px; }
.review-slide { margin: 0; }
.review-slide[hidden] { display: none; }
.review-slide blockquote { color: var(--ink); font-family: var(--serif); font-size: clamp(19px, 2.1vw, 27px); font-style: italic; font-weight: 400; line-height: 1.42; letter-spacing: -.015em; margin: 0 0 20px; max-width: 820px; }
.review-slide figcaption { color: var(--burgundy); font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.review-controls { display: flex; align-items: center; justify-content: flex-end; gap: 13px; margin-top: 13px; }
.review-arrow { width: 32px; height: 32px; border: 1px solid var(--rule); border-radius: 50%; color: var(--moss); background: transparent; display: grid; place-items: center; padding: 0; cursor: pointer; }
.review-arrow:hover { border-color: var(--moss); }
.review-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.review-dots { display: flex; align-items: center; gap: 7px; }
.review-dots button { width: 7px; height: 7px; border: 0; border-radius: 50%; padding: 0; background: var(--rule); cursor: pointer; }
.review-dots button[aria-current="true"] { background: var(--burgundy); }
.visit { border-top: 1px solid var(--rule); padding: clamp(64px, 9vw, 120px) clamp(24px, 10vw, 152px) clamp(70px, 9vw, 112px); }
.section-heading h2 { font: 500 clamp(34px, 4vw, 52px)/1 var(--serif); letter-spacing: -.04em; margin-bottom: 44px; }
.visit-layout { display: grid; grid-template-columns: minmax(270px, .78fr) minmax(0, 1.22fr); gap: clamp(32px, 5vw, 78px); align-items: start; }
.visit-details { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.detail-card { display: grid; grid-template-columns: 38px 1fr; gap: 15px; padding: 21px 0; border-bottom: 1px solid var(--rule); }
.detail-icon { width: 28px; height: 28px; color: var(--burgundy); padding-top: 2px; }
.detail-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.detail-card h3 { font-size: 11px; color: var(--ink-soft); letter-spacing: .13em; text-transform: uppercase; margin: 0 0 6px; }
.detail-card p, address { font-style: normal; font-size: 15px; line-height: 1.55; margin: 0; }
.phone-link { color: var(--burgundy); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.map-panel { border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; background: var(--paper-deep); }
.location-map { display: block; width: 100%; height: 340px; border: 0; filter: grayscale(.28) sepia(.18) saturate(.72) contrast(.95) brightness(.98); }
.map-bottom { padding: 13px 16px; display: flex; justify-content: space-between; align-items: center; gap: 15px; background: var(--paper); border-top: 1px solid var(--rule); }
.map-bottom p { color: var(--ink-soft); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin: 0; }
.sign-spotter { margin: 0; border-top: 1px solid var(--rule); background: var(--paper); }
.sign-photo { height: 190px; overflow: hidden; background: var(--paper-deep); }
.sign-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 66% 53%; }
.sign-spotter figcaption { color: var(--ink-soft); font: italic 14px/1.35 var(--serif); margin: 0; padding: 12px 16px 14px; }
.sign-spotter figcaption span { color: var(--burgundy); font-family: var(--sans); font-size: 10px; font-style: normal; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; margin-right: 4px; }
.site-footer { border-top: 1px solid var(--rule); padding: 25px clamp(24px, 6vw, 92px); display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.site-footer p { color: var(--ink-soft); font-size: 12px; margin: 0; }
.footer-nav { gap: 15px; }
.footer-nav a { font-size: 12px; }
.socials { display: flex; gap: 7px; }
.social-placeholder { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: 50%; color: var(--ink-soft); }
.social-placeholder svg { height: 14px; width: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.social-placeholder:first-child svg { fill: currentColor; stroke: none; }
@media (max-width: 760px) { .site-header { min-height: 66px; } .hero { min-height: auto; grid-template-columns: 1fr; padding-top: 70px; gap: 47px; } .book-scene { min-height: 350px; max-width: 520px; width: 100%; margin-left: auto; } .store-photo-main { inset: 38px 35px 55px 18px; } .store-photo-detail { width: 42%; height: 40%; } .browse { grid-template-columns: 1fr; align-items: start; gap: 25px; } .testimonials { grid-template-columns: 1fr; gap: 30px; } .visit-layout { grid-template-columns: 1fr; } .map-panel { max-width: 680px; } }
@media (max-width: 520px) { .header-nav { gap: 10px; } .header-nav a { font-size: 11px; } .wordmark { font-size: 17px; } h1 { font-size: 49px; } .intro { font-size: 16px; } .book-scene { min-height: 315px; } .store-photo-main { inset: 35px 24px 53px 10px; } .store-photo-detail { width: 46%; height: 38%; right: 0; bottom: 42px; } .book-scene figcaption { font-size: 15px; } .review-slides { min-height: 175px; } .review-slide blockquote { font-size: 19px; } .review-controls { justify-content: space-between; } .location-map { height: 300px; } .sign-photo { height: 165px; } .site-footer { align-items: flex-start; flex-direction: column; gap: 15px; } .footer-nav { order: 3; flex-wrap: wrap; padding-right: 50px; } .socials { position: absolute; right: 24px; } .map-bottom { align-items: flex-start; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .button { transition: none; } }