:root { --ink: #132316; --forest: #276749; --cream: #f8f5ed; --border: #dfe7df; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--cream); font: 16px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: var(--forest); }
.container { width: min(100% - 2rem, 72rem); margin: 0 auto; }
.site-header { padding: 1rem 0; border-bottom: 1px solid var(--border); background: #fff; }
.site-header .container { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.brand { color: var(--ink); font-size: 1.2rem; font-weight: 800; text-decoration: none; }
.nav { display: flex; align-items: center; gap: 1rem; }
.account-nav { display: flex; align-items: center; gap: .85rem; }
.account-nav a[aria-current="page"] { font-weight: 800; text-decoration-thickness: .15em; text-underline-offset: .25em; }
.account-nav__greeting { font-weight: 700; }
.button { display: inline-block; padding: .7rem 1rem; border: 1px solid var(--forest); border-radius: .5rem; color: #fff; background: var(--forest); font-weight: 700; text-decoration: none; cursor: pointer; }
.button--secondary { color: var(--forest); background: #fff; }
.hero { padding: 5rem 0 3rem; max-width: 48rem; }
.hero h1 { font-size: clamp(2.3rem, 7vw, 4.5rem); line-height: 1.05; margin: 0 0 1rem; }
.hero p { font-size: 1.2rem; }
.hero--map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: stretch; max-width: none; padding: 3rem 0; }
.hero__intro { display: flex; flex-direction: column; justify-content: center; padding: 2rem 3rem 2rem 0; }
.hero__intro p { margin: 0 0 1rem; }
.hero__intro h1 { font-size: clamp(2.3rem, 4vw, 4rem); }
.nearby-map { position: relative; min-width: 0; height: clamp(30rem, 46vw, 34rem); overflow: hidden; border: 1px solid var(--border); border-radius: .75rem; background: #dfe7df; box-shadow: 0 1rem 3rem rgb(19 35 22 / 10%); }
.nearby-map__canvas { height: 100%; }
.nearby-map__panel { position: absolute; z-index: 500; right: 1rem; bottom: 1rem; width: min(calc(100% - 2rem), 28rem); padding: .9rem 1rem; border: 1px solid var(--border); border-radius: .6rem; background: rgb(255 255 255 / 96%); box-shadow: 0 .5rem 1.5rem rgb(19 35 22 / 18%); }
.nearby-map__status { margin: 0 0 .6rem; font-size: .95rem; }
/* Leaflet essentials are local so map layout does not rely on a CDN stylesheet. */
.leaflet-container { overflow: hidden; font: inherit; -webkit-tap-highlight-color: transparent; outline: 0; }
.leaflet-pane, .leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-tile-container, .leaflet-pane > svg, .leaflet-pane > canvas, .leaflet-zoom-box, .leaflet-image-layer, .leaflet-layer { position: absolute; top: 0; left: 0; }
.leaflet-pane { z-index: 400; }
.leaflet-tile-pane { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane { z-index: 500; }
.leaflet-marker-pane { z-index: 600; }
.leaflet-tooltip-pane { z-index: 650; }
.leaflet-popup-pane { z-index: 700; }
.leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow { user-select: none; -webkit-user-drag: none; }
.leaflet-tile { visibility: hidden; }
.leaflet-tile-loaded { visibility: inherit; }
.leaflet-container .leaflet-tile { max-width: none !important; max-height: none !important; width: 256px; height: 256px; padding: 0; }
.leaflet-control { position: relative; z-index: 800; pointer-events: auto; }
.leaflet-top, .leaflet-bottom { position: absolute; z-index: 1000; pointer-events: none; }
.leaflet-top { top: 0; }
.leaflet-right { right: 0; }
.leaflet-bottom { bottom: 0; }
.leaflet-left { left: 0; }
.leaflet-top .leaflet-control { margin-top: .65rem; }
.leaflet-left .leaflet-control { margin-left: .65rem; }
.leaflet-bottom .leaflet-control { margin-bottom: .35rem; }
.leaflet-right .leaflet-control { margin-right: .35rem; }
.leaflet-control-zoom, .leaflet-control-attribution { border-radius: .3rem; background: rgb(255 255 255 / 92%); box-shadow: 0 1px 5px rgb(0 0 0 / 22%); }
.leaflet-control-zoom a { display: block; width: 1.9rem; height: 1.9rem; border-bottom: 1px solid #ccc; color: var(--ink); font-size: 1.3rem; line-height: 1.8rem; text-align: center; text-decoration: none; }
.leaflet-control-zoom a:last-child { border-bottom: 0; }
.leaflet-control-attribution { padding: 0 .3rem; font-size: .7rem; }
.card { max-width: 34rem; margin: 3rem auto; padding: 2rem; border: 1px solid var(--border); border-radius: .75rem; background: #fff; box-shadow: 0 1rem 3rem rgb(19 35 22 / 6%); }
.account-page { max-width: 56rem; margin: 3rem auto; }
.account-page h1 { margin: 0; font-size: clamp(2rem, 5vw, 3rem); }
.eyebrow { margin: 0 0 .25rem; color: var(--forest); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
.account-form { margin: 2rem 0 0; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.book-search { margin: 2rem 0 1rem; }
.book-search label { margin-top: 0; }
.book-search > div { display: flex; gap: .75rem; }
.book-search input { min-width: 0; }
.book-list { border: 1px solid var(--border); border-radius: .75rem; overflow: hidden; background: #fff; }
.book-list__item { display: flex; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.25rem; border-bottom: 1px solid var(--border); }
.book-list__item:last-child { border-bottom: 0; }
.book-list__item h2 { margin: 0; font-size: 1.1rem; }
.book-list__item p { margin: .2rem 0 0; }
.status { align-self: start; padding: .2rem .5rem; border-radius: 999px; background: #e4f4e8; color: #175c2c; font-size: .85rem; font-weight: 700; white-space: nowrap; }
.empty-state { margin-top: 2rem; padding: 2rem; border: 1px dashed #9eaa9f; border-radius: .75rem; background: #fff; text-align: center; }
label { display: block; margin: 1rem 0 .35rem; font-weight: 700; }
input, textarea { width: 100%; padding: .7rem; border: 1px solid #9eaa9f; border-radius: .4rem; font: inherit; }
.alert { padding: .85rem 1rem; margin: 1rem 0; border-radius: .4rem; background: #fde8e7; color: #8a1c17; }
.alert--success { background: #e4f4e8; color: #175c2c; }
@media (max-width: 48rem) { .hero--map { grid-template-columns: 1fr; gap: 1.5rem; padding: 2.5rem 0; } .hero__intro { padding: 0; } .nearby-map { height: 28rem; } }
@media (max-width: 48rem) { .site-header .container { align-items: flex-start; } .nav { align-items: flex-end; gap: .6rem; font-size: .9rem; } .account-nav { flex-wrap: wrap; justify-content: flex-end; gap: .4rem .7rem; } .account-nav__greeting { width: 100%; text-align: right; } .page-heading, .book-list__item { align-items: flex-start; flex-direction: column; } .book-search > div { flex-direction: column; } .book-search .button { align-self: start; } }
@media (max-width: 40rem) { .hero__intro h1 { font-size: 2.3rem; } .nearby-map { height: 26rem; } .nearby-map__panel { right: .75rem; bottom: .75rem; width: calc(100% - 1.5rem); } }