:root {
--ink: #1c2b2a;
--page: #f1ede3;
--moss: #4a5f4e;
--gilt: #b8862f;
--rule: rgba(28, 43, 42, 0.15);

--display: 'Fraunces', serif;
--body: 'Inter', sans-serif;
}

{ box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
margin: 0;
background: var(--page);
color: var(--ink);
font-family: var(--body);
line-height: 1.6;
}

.wrap {
max-width: 1040px;
margin: 0 auto;
padding: 0 24px;
}

a { color: inherit; }

h1, h2, h3 {
font-family: var(--display);
font-weight: 600;
margin: 0;
letter-spacing: -0.01em;
}

/* Header */
.site-header {
border-bottom: 1px solid var(--rule);
position: sticky;
top: 0;
background: var(--page);
z-index: 10;
}

.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 20px;
padding-bottom: 20px;
}

.wordmark {
font-family: var(--display);
font-weight: 700;
font-size: 1.3rem;
}

.site-header nav {
display: flex;
gap: 28px;
}

.site-header nav a {
text-decoration: none;
font-size: 0.95rem;
color: var(--moss);
border-bottom: 1px solid transparent;
padding-bottom: 2px;
transition: border-color 0.2s ease;
}

.site-header nav a:hover,
.site-header nav a:focus-visible {
border-color: var(--moss);
}

/* Hero */
.hero {
padding: 96px 0 0;
position: relative;
}

.hero-inner {
max-width: 640px;
padding-bottom: 64px;
}

.eyebrow {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--moss);
margin: 0 0 18px;
}

.hero h1 {
font-size: clamp(2.4rem, 5vw, 3.6rem);
line-height: 1.08;
margin-bottom: 24px;
}

.hero-copy {
font-size: 1.1rem;
color: #3c4a44;
margin-bottom: 32px;
max-width: 52ch;
}

.btn {
display: inline-block;
background: var(--ink);
color: var(--page);
text-decoration: none;
padding: 14px 26px;
border-radius: 2px;
font-size: 0.95rem;
font-weight: 500;
transition: background 0.2s ease;
}

.btn:hover,
.btn:focus-visible {
background: var(--moss);
}

.btn-alt {
background: transparent;
color: var(--ink);
border: 1px solid var(--ink);
}

.btn-alt:hover,
.btn-alt:focus-visible {
background: var(--ink);
color: var(--page);
}

/* Decorative spine strip: mimics a shelf of book spines */
.spine-strip {
display: flex;
height: 64px;
width: 100%;
}

.spine-strip span {
flex: 1;
}

.spine-strip span:nth-child(1) { background: #6b3f2e; }
.spine-strip span:nth-child(2) { background: #4a5f4e; }
.spine-strip span:nth-child(3) { background: #b8862f; }
.spine-strip span:nth-child(4) { background: #1c2b2a; }
.spine-strip span:nth-child(5) { background: #8a5a3b; }
.spine-strip span:nth-child(6) { background: #3c4a44; }
.spine-strip span:nth-child(7) { background: #c9a15a; }
.spine-strip span:nth-child(8) { background: #4a5f4e; }
.spine-strip span:nth-child(9) { background: #6b3f2e; }
.spine-strip span:nth-child(10) { background: #1c2b2a; }

/* Shelves */
.shelves {
padding: 88px 0;
}

.shelves h2 {
font-size: 1.9rem;
margin-bottom: 40px;
}

.shelf-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1px;
background: var(--rule);
border: 1px solid var(--rule);
}

.shelf-card {
background: var(--page);
padding: 32px 28px;
}

.shelf-label {
display: inline-block;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--gilt);
margin-bottom: 14px;
}

.shelf-card h3 {
font-size: 1.2rem;
margin-bottom: 10px;
}

.shelf-card p {
font-size: 0.95rem;
color: #4a4a42;
margin: 0;
}

/* Hours */
.hours {
background: var(--ink);
color: var(--page);
padding: 80px 0;
}

.hours-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
}

.hours h2 {
color: var(--page);
margin-bottom: 28px;
}

.hours-list div {
display: flex;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid rgba(241, 237, 227, 0.15);
max-width: 320px;
}

.hours-list dt {
color: rgba(241, 237, 227, 0.7);
font-weight: 400;
}

.hours-list dd {
margin: 0;
font-weight: 500;
}

.pull-quote {
font-family: var(--display);
font-style: italic;
font-size: 1.5rem;
line-height: 1.4;
margin: 0;
color: var(--gilt);
border-left: 2px solid var(--gilt);
padding-left: 24px;
}

/* Visit */
.visit {
padding: 88px 0;
text-align: center;
}

.visit h2 {
font-size: 1.9rem;
margin-bottom: 16px;
}

.visit p {
color: #3c4a44;
margin-bottom: 28px;
}

/* Footer */
.site-footer {
border-top: 1px solid var(--rule);
padding: 28px 0;
}

.site-footer p {
margin: 0;
font-size: 0.85rem;
color: var(--moss);
}

/* Responsive */
@media (max-width: 680px) {
.header-inner { flex-direction: column; gap: 12px; align-items: flex-start; }
.hero { padding-top: 64px; }
.hours-inner { grid-template-columns: 1fr; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.btn, .site-header nav a { transition: none; }
}