:root { --ink: #141414; --paper: #fafafa; --corner-radius: 4px; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: Arial, Helvetica, sans-serif; font-size: 16px; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
.prototype-notice { margin: 0; padding: .75rem 1rem; text-align: center; background: #fafafa; color: #333; font-size: .875rem; }
.hero { position: relative; isolation: isolate; min-height: 90svh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 5vw; padding: 8rem max(6vw, 1.5rem); }
.product-image { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #1119, #111e), url('background.JPG') center / cover; }
.site-header, .site-footer { position: absolute; left: max(6vw, 1.5rem); right: max(6vw, 1.5rem); display: flex; justify-content: space-between; gap: 1rem; align-items: center; font-size: .875rem; }
.site-header { top: 2rem; }
.wordmark { font-family: Georgia, serif; font-size: 1.25rem; text-decoration: none; }
.book-display { margin: 0; justify-self: center; width: min(100%, 27rem); }
.book-display img { display: block; width: 100%; height: auto; box-shadow: 0 2rem 4rem #0008; }
.product-card { max-width: 32rem; }
.eyebrow { font-size: .875rem; letter-spacing: .15em; text-transform: uppercase; margin: 0 0 1.5rem; }
h1 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: clamp(3rem, 6vw, 6rem); line-height: 1; letter-spacing: -.045em; margin: 0; }
.description { font-family: Georgia, serif; font-size: 1.375rem; line-height: 1.5; color: #ddd; margin: 1.5rem 0 3rem; }
.purchase-row { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 1.5rem; }
.price { font-size: 1.5rem; font-weight: 400; }
.buy-button { display: flex; align-items: center; justify-content: space-between; min-height: 3.5rem; padding: 1rem 1.25rem; border: 1px solid #fafafa; color: #141414; background: #fafafa; }
.buy-button:hover { background: #dedede; }
.shipping-note { font-size: .875rem; line-height: 1.5; color: #ccc; }
.site-footer { bottom: 2rem; color: #ccc; }
.site-footer nav { display: flex; gap: 1rem; }
.policies { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; padding: 4rem max(6vw, 1.5rem); }
.policies details { border-top: 1px solid #555; padding-top: 1rem; }
summary { cursor: pointer; }
.policies p { color: #ccc; line-height: 1.6; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #999; outline-offset: 5px; }
@media (max-width: 700px) {
  .hero { grid-template-columns: 1fr; gap: 2.5rem; padding-top: 6rem; padding-bottom: 7rem; }
  .book-display { width: min(75%, 20rem); }
  .product-card { width: 100%; justify-self: center; }
  .site-header > span { display: none; }
  .site-footer { flex-wrap: wrap; }
  .policies { grid-template-columns: 1fr; }
  .description { margin-bottom: 2rem; }
}

[hidden] { display: none !important; }
button:disabled { opacity: .5; cursor: default; }
body:has(.checkout-dialog[open]) { overflow: hidden; }
.checkout-dialog { width: min(34rem, calc(100% - 2rem)); max-height: calc(100svh - 2rem); margin: auto; padding: 0; border: 0; border-radius: var(--corner-radius); overflow-y: auto; overscroll-behavior: contain; background: var(--paper); color: var(--ink); box-shadow: 0 16px 64px #0004; }
.checkout-dialog::backdrop { background: #000b; }
.dialog-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid #ddd; }
.dialog-header .eyebrow { margin: 0 0 .375rem; font-size: .7rem; }
.dialog-header h2 { margin: 0; font: 400 1.625rem Georgia, serif; }
.close-button { width: 2.75rem; height: 2.75rem; flex-shrink: 0; border: 0; border-radius: var(--corner-radius); background: transparent; font-size: 1.5rem; }
.close-button:hover { background: #eee; }
.checkout-status { margin: 0; padding: .75rem 1.5rem; font-size: .875rem; line-height: 1.5; background: #eee; }
.checkout-form { display: grid; gap: 1.25rem; padding: 1.5rem; }
.checkout-delivery, .checkout-information, .checkout-payment { display: grid; align-content: start; gap: 1.25rem; min-width: 0; }
.checkout-information:not(:has(> :not([hidden]))) { display: none; }
#step-title { margin: 0; font: 600 1.125rem Arial, sans-serif; }
#step-title:focus { outline: none; }
.checkout-step, fieldset.shipping-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.checkout-form label { display: block; margin-bottom: .375rem; font-size: .875rem; line-height: 1.25; }
.checkout-form input, .checkout-form select { width: 100%; min-width: 0; min-height: 44px; padding: .625rem .5625rem; margin: 0; font: 400 1rem/1.25 Arial, sans-serif; border: 1px solid #e6e6e6; border-radius: var(--corner-radius); box-shadow: 0 1px 1px rgb(0 0 0 / 3%), 0 3px 6px rgb(0 0 0 / 2%); background: #fff; color: var(--ink); }
.checkout-dialog :is(input, select, button):focus-visible { outline: 2px solid #0570de; outline-offset: 1px; }
.checkout-form input::placeholder { color: #757575; opacity: 1; }
.floating-field { position: relative; }
.checkout-form .floating-field :is(input, select) { min-height: 44px; padding-top: 11px; padding-bottom: 9px; }
.checkout-form .floating-field label { position: absolute; top: -7px; left: 7px; max-width: calc(100% - 24px); padding: 0 4px; margin: 0; background: linear-gradient(var(--paper) 50%, #fff 50%); font-size: 12px; line-height: 1.25; color: #555; pointer-events: none; }
.floating-field .optional { font-size: inherit; }
.checkout-form .floating-field:has(input:placeholder-shown:not(:focus)) label { top: 12px; font-size: 16px; background: transparent; }
.checkout-form .floating-field input:not(:focus)::placeholder { color: transparent; }
.checkout-form .floating-field:has(select:required:invalid:not(:focus)) label { top: 12px; font-size: 16px; background: transparent; }
.checkout-form .floating-field select:required:invalid:not(:focus) { color: transparent; }
.checkout-form .floating-field select option { color: var(--ink); }
.checkout-form :is(input, select):disabled { background-color: #f5f5f5; color: #666; }
.delivery-options { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.delivery-option { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .5rem; min-height: 6.5rem; padding: 1rem; border: 1px solid #e6e6e6; border-radius: var(--corner-radius); box-shadow: 0 1px 1px rgb(0 0 0 / 3%), 0 3px 6px rgb(0 0 0 / 2%); background: white; color: var(--ink); text-align: left; }
.delivery-option strong { font-size: 1rem; }
.delivery-option span { font-size: .875rem; color: #555; }
.delivery-option[aria-pressed="true"] { color: #0570de; background: #fff; border-color: #0570de; box-shadow: 0 0 0 1px #0570de; }
.quantity-row { display: flex; align-items: end; gap: 1rem; margin-top: 1.5rem; }
.quantity-row > div { width: 8rem; }
.quantity-row > span { padding-bottom: .75rem; color: #555; font-size: .875rem; }
.contact-fields { display: grid; gap: 1rem; margin-bottom: 1rem; }
.shipping-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem .75rem; }
.shipping-fields > div { min-width: 0; }
.contact-fields .field-full, .shipping-fields .field-full { grid-column: 1 / -1; }
.checkout-note { font-size: .8rem; line-height: 1.5; color: #555; }
.optional { color: #666; font-size: .75rem; }
#express-checkout { margin: 0; }
.wallets-disabled { opacity: .5; pointer-events: none; }
.payment-heading { margin: 0 0 1rem; font: 600 1.125rem Arial, sans-serif; }
.checkout-summary { padding: .75rem 0 0; margin-top: 0; background: var(--paper); border-top: 1px solid #ddd; }
.checkout-totals { margin: 0 0 1rem; }
.checkout-totals > div { display: flex; justify-content: space-between; gap: 1rem; margin: .5rem 0; font-size: .875rem; }
.checkout-totals dd { margin: 0; }
.checkout-totals .grand-total { padding-top: .375rem; font-size: 1.125rem; font-weight: 600; }
.checkout-actions { display: flex; gap: .75rem; }
.checkout-form .buy-button { flex: 1; justify-content: center; min-height: 48px; border: 0; border-radius: var(--corner-radius); background: var(--ink); color: white; }
.checkout-summary > .checkout-note:last-child { font-size: .7rem; margin: .75rem 0 0; }
#quote-status:empty, #details-status:empty { display: none; }
.checkout-dialog.is-preparing { opacity: 0; pointer-events: none; }
.checkout-dialog.is-preparing::backdrop { background: transparent; }
@media (max-width: 600px) {
 .checkout-dialog { width: calc(100% - 1rem); max-height: calc(100svh - 1rem); }
 .dialog-header, .checkout-form { padding: 1rem; }
 .delivery-option { padding: .75rem; }
}
@media (min-width: 900px) {
 .checkout-dialog { width: min(64rem, calc(100% - 4rem)); }
 .checkout-form { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 1.5rem 2rem; }
 .checkout-delivery { grid-column: 1; grid-row: 1; }
 .delivery-option { min-height: 5rem; }
 .quantity-row { margin-top: 1.25rem; }
 .quantity-row > div { width: 8rem; }
 .checkout-information { grid-column: 1; grid-row: 2; }
 .checkout-payment { grid-column: 2; grid-row: 1 / 3; padding-left: 2rem; border-left: 1px solid #e6e6e6; }
 .contact-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
 .contact-fields > div { min-width: 0; }
 .contact-fields:has(#shipping-phone-field[hidden]) { grid-template-columns: 1fr; }
}

/* Minimal book landing page. */
.hero { min-height: 100svh; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 2rem; padding: 3rem 1.5rem; }
.hero .book-display { width: min(75vw, 24rem); }
.hero #buy-button { justify-self: center; justify-content: center; width: min(75vw, 24rem); }

.landing-footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; justify-self: center; width: min(75vw, 24rem); color: #ccc; font-size: .8125rem; }
.contact-button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .5rem .875rem; border: 1px solid #777; text-decoration: none; }
.contact-button:hover { color: #fff; border-color: #fff; }

.contact-button { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 10; background: #141414; color: #fafafa; border-radius: var(--corner-radius); padding: .625rem 1.125rem; box-shadow: 0 .25rem 1rem #0004; }
.landing-footer { justify-content: center; padding-bottom: 3.5rem; }

.contact-button { border: 0; border-radius: var(--corner-radius); background: transparent; box-shadow: none; text-decoration: underline; text-underline-offset: .2em; }

.landing-footer > span { position: fixed; left: max(1rem, env(safe-area-inset-left)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 10; display: inline-flex; align-items: center; min-height: 2.75rem; padding: .625rem 1.125rem; }
@media (max-width: 480px) {
 .landing-footer > span, .contact-button { padding-inline: .25rem; }
}

.hero .book-display img, .hero #buy-button { border-radius: var(--corner-radius); }

/* Keep the native dropdown arrow consistent with Stripe Elements. */
.checkout-form select {
 appearance: none;
 padding: .625rem 2.25rem .625rem .5625rem;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23666' stroke-width='1.5'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: right .75rem center;
}
@media (forced-colors: active) {
 .checkout-form select { appearance: auto; background-image: none; }
}