/* The new look on the main site (J, 30 Sep 2026): Aesop's restraint, the
   brand colors in brand.css. Everything is scoped to html.newlook, which is on
   only on preview copies or with ?newlook=1, so the live site is unchanged
   until it is switched on for everyone. Wording is untouched: this is type,
   color, shape and spacing only. */

html.newlook body { font-family: var(--rh-sans); color: var(--rh-ink); }
html.newlook p, html.newlook li, html.newlook .step-desc, html.newlook .faq-a { font-family: var(--rh-sans); }

/* Nav: plain words, one Walnut button */
html.newlook nav { font-family: var(--rh-sans); }
html.newlook .nav-links a { font-family: var(--rh-sans); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--rh-ink); }
html.newlook .nav-links a:hover { color: var(--rh-wordmark); }
html.newlook .nav-cta { font-family: var(--rh-sans); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none;
  background: var(--rh-walnut); color: var(--rh-linen) !important; border: 0; border-radius: 0; padding: 12px 20px; }
html.newlook .nav-cta:hover { background: var(--rh-walnut-2); }

/* Hero: the photo stays; buttons square and in the sans */
html.newlook .hero-sub { font-family: var(--rh-sans); font-size: 17px !important; }
html.newlook .hero-btn { font-family: var(--rh-sans) !important; font-size: 15px !important; font-weight: 500; border-radius: 0 !important; letter-spacing: 0; }
html.newlook .hero-btn--primary { background: var(--rh-linen) !important; color: var(--rh-ink) !important; box-shadow: none !important; }

/* The burgundy band becomes a quiet line: burgundy is for emphasis only */
html.newlook .static-band { background: var(--rh-oat); color: var(--rh-ink); font-family: var(--rh-sans); font-size: 14px; letter-spacing: 0;
  border-bottom: 1px solid var(--rh-rule); padding: 14px 24px; }
html.newlook .static-band .sep { color: var(--rh-tan); }

/* Section labels: small and plain, no dash */
html.newlook .section-label { font-family: var(--rh-sans); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--rh-stone); }
html.newlook .section-label::before { display: none; }

/* Editions: the book on an Oat stage, square, a Walnut button */
html.newlook .edition-tile { background: var(--rh-oat); border-radius: 0; }
html.newlook .edition-card:hover .edition-tile { box-shadow: none; background: #E9E3D7; }
/* Best Seller: a filled tag again, bigger and bolder (J, 1 Oct 2026: the plain
   text version was too subtle). Walnut, not the old tan, so the white reads. */
html.newlook .edition-flag { background: var(--rh-walnut); color: var(--rh-linen); border-radius: 999px; font-family: var(--rh-sans);
  font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 16px; top: 16px; left: 16px; }
html.newlook .btn-select { background: var(--rh-walnut); border-radius: 0; font-family: var(--rh-sans); font-size: 14px; font-weight: 500;
  letter-spacing: 0; text-transform: none; padding: 14px 22px; }
html.newlook .btn-select:hover { background: var(--rh-walnut-2); opacity: 1; }
html.newlook .edition-price, html.newlook .edition-meta, html.newlook .edition-fine { font-family: var(--rh-sans); font-style: normal; color: var(--rh-stone); }
html.newlook .edition-price { color: var(--rh-ink); font-size: 16px; }

/* Steps: thin rules, quiet numbers */
html.newlook .step-number { color: var(--rh-stone); opacity: 0.5; }
html.newlook .step-accent { background: var(--rh-rule); }
html.newlook .step { border-color: var(--rh-rule) !important; }
html.newlook .step-desc { color: var(--rh-stone); font-size: 15px; }

/* Testimonials: square, flat */
html.newlook .testimonial-photo img { border-radius: 0; border: 0; }
html.newlook .testimonial-quote { border-radius: 0; background: var(--rh-oat); }

/* FAQ */
html.newlook .faq-q { font-family: var(--rh-sans); font-size: 16px; color: var(--rh-ink); }
html.newlook .faq-q:hover { color: var(--rh-wordmark); }
html.newlook .faq-item { border-bottom-color: var(--rh-rule); }

/* Links in running text: the wordmark's rust */
html.newlook a.link-u, html.newlook .gift-links a { color: var(--rh-wordmark); }

/* Editions on Linen, so the Oat stage under each book reads (Aesop's cards) */
html.newlook .editions-section { background: var(--rh-linen); }

/* Steps: the grid's tan gutters become hairlines */
html.newlook .steps-grid { background: var(--rh-rule); gap: 1px; }
html.newlook .step { background: var(--rh-linen); }
html.newlook .step:hover { background: var(--rh-linen); }
html.newlook .step-number { font-weight: 400; }

/* For me / As a gift: Aesop's tabs, a short rule under the chosen one */
html.newlook .how-tab { font-family: var(--rh-sans) !important; font-size: 14px !important; letter-spacing: 0 !important; text-transform: none !important;
  color: var(--rh-stone) !important; border: 0 !important; border-bottom: 2px solid transparent !important; padding: 0 0 6px !important; }
html.newlook .how-tab.how-tab--active { color: var(--rh-walnut) !important; border-bottom-color: var(--rh-walnut) !important; }

/* Gifting: the inline serif and burgundy give way to the system */
html.newlook #gifting p { font-family: var(--rh-sans) !important; color: var(--rh-stone) !important; }
html.newlook #gifting p a { color: var(--rh-wordmark) !important; }
html.newlook #gifting { background: var(--rh-oat) !important; }

/* The stage spans the card, so the name and button sit right under the book
   (the old tile kept its width by height, leaving the button stranded). */
html.newlook .edition-tile { aspect-ratio: auto; width: 100%; height: 42vh; max-height: 440px; min-height: 280px; }
html.newlook .editions-grid { gap: 40px 48px; }
@media (max-width: 768px) { html.newlook .edition-tile { height: auto; aspect-ratio: 1 / 1; max-height: none; min-height: 0; } }

/* ══ The porch: who it's for, edition, name and facts, look and feel, title ══
   The same system as the pay and story pages: Linen page, Oat stage for the
   book, one sans for everything but questions, square corners, thin rules,
   Walnut for buttons and for what is chosen. */

/* The progress bar */
html.newlook .roadmap-bar { background: var(--rh-linen); border-bottom-color: var(--rh-rule); }
html.newlook .rm-step { font-family: var(--rh-sans); color: var(--rh-stone); }
html.newlook .rm-step.is-now { color: var(--rh-walnut); }
html.newlook .rm-line { background: var(--rh-rule); opacity: 1; }
html.newlook .rm-step.is-done .rm-line { background: var(--rh-walnut); opacity: 0.55; }
html.newlook .rm-step.is-now .rm-line { background: var(--rh-rule); }
html.newlook .rm-step.is-now .rm-line::after { background: var(--rh-walnut); }

/* The book's side: an Oat stage, no decoration */
html.newlook .left-panel { background: var(--rh-oat); }
html.newlook .left-panel::after { display: none; }
html.newlook .panel-title { font-weight: 400; }
html.newlook .panel-desc, html.newlook .left-panel p { font-family: var(--rh-sans); color: var(--rh-stone); }

/* Questions keep Garamond; labels and hints are the sans */
html.newlook .question-text { font-weight: 400; }
html.newlook .question-meta { font-family: var(--rh-sans); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--rh-stone); }
html.newlook .question-meta::before { display: none; }
html.newlook .question-hint { font-family: var(--rh-sans); font-size: 16px; color: var(--rh-stone); }
html.newlook .required-note { font-family: var(--rh-sans); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--rh-stone); }
html.newlook label, html.newlook .pair-label, html.newlook .field-group label { font-family: var(--rh-sans); letter-spacing: 0; text-transform: none; }

/* Choices: square, a hairline, Walnut when chosen */
html.newlook .path-card, html.newlook .vibe-card, html.newlook .palette-option, html.newlook .title-suggestion {
  border: 1px solid var(--rh-rule); border-radius: 0; background: var(--rh-linen); }
html.newlook .path-card:hover, html.newlook .vibe-card:hover, html.newlook .palette-option:hover, html.newlook .title-suggestion:hover {
  border-color: var(--rh-stone); background: var(--rh-linen); }
html.newlook .path-card.selected, html.newlook .vibe-card.selected, html.newlook .palette-option.selected, html.newlook .title-suggestion.selected {
  border: 1.5px solid var(--rh-walnut); background: var(--rh-linen); }
html.newlook .path-card.selected::after, html.newlook .vibe-card.selected::after, html.newlook .palette-option.selected::after, html.newlook .title-suggestion.selected::after { color: var(--rh-walnut); }
html.newlook .path-card *, html.newlook .vibe-card .vibe-desc, html.newlook .title-suggestion-text { font-family: var(--rh-sans); }
html.newlook .vibe-name { font-family: var(--rh-serif); }

/* Who it's for: the two buttons styled inline by the page */
html.newlook #forkMyPet, html.newlook #forkSomeoneElse { font-family: var(--rh-sans) !important; font-size: 15px !important; border: 1px solid var(--rh-rule) !important; }
html.newlook #forkMyPet[style*="98, 29, 27"], html.newlook #forkSomeoneElse[style*="98, 29, 27"],
html.newlook #forkMyPet[style*="621D1B"], html.newlook #forkSomeoneElse[style*="621D1B"] {
  background: var(--rh-walnut) !important; border-color: var(--rh-walnut) !important; color: var(--rh-linen) !important; }

/* Word choices */
html.newlook .chip { font-family: var(--rh-sans); font-size: 15px; font-weight: 400; color: var(--rh-ink); border: 1px solid var(--rh-rule); }
html.newlook .chip:hover { border-color: var(--rh-stone); color: var(--rh-ink); }
html.newlook .chip.selected { background: var(--rh-walnut); border-color: var(--rh-walnut); color: var(--rh-linen); }

/* Typing: a quiet underline */
html.newlook .answer-input, html.newlook .answer-textarea { font-family: var(--rh-sans); font-size: 18px; font-weight: 400; border-bottom: 1px solid var(--rh-ink); }
html.newlook .answer-input:focus, html.newlook .answer-textarea:focus { border-bottom: 2px solid var(--rh-walnut); }
html.newlook .answer-input::placeholder, html.newlook .answer-textarea::placeholder { font-family: var(--rh-sans); font-style: normal; color: #8C847B; }

/* Buttons */
html.newlook .btn-next { background: var(--rh-walnut); font-family: var(--rh-sans); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; border-radius: 0; }
html.newlook .btn-next:hover { background: var(--rh-walnut-2); }
html.newlook .btn-next:disabled { background: var(--rh-rule); color: var(--rh-stone); }
html.newlook .btn-prev { font-family: var(--rh-sans); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--rh-stone); }
html.newlook .btn-prev:hover { color: var(--rh-ink); }

/* Small labels: sentence-sized sans, no capitals or tracking */
html.newlook #page-questionnaire label, html.newlook .title-own-label, html.newlook .title-divider-text {
  font-family: var(--rh-sans) !important; font-size: 13px !important; font-weight: 500; letter-spacing: 0 !important; text-transform: none !important; color: var(--rh-stone) !important; }
html.newlook .pair-optional { font-family: var(--rh-sans); font-style: normal; }
/* A book title stays in the book's serif */
html.newlook .title-suggestion-text { font-family: var(--rh-serif) !important; font-size: 18px; }
/* Header links */
html.newlook .nav-save, html.newlook .nav-back { font-family: var(--rh-sans); font-size: 13px; letter-spacing: 0; text-transform: none; }
html.newlook .nav-save { color: var(--rh-wordmark); border-bottom-color: var(--rh-rule); }
html.newlook .nav-back { color: var(--rh-ink); }

/* "Before you begin" */
html.newlook .ahead-card { border-radius: 0; background: var(--rh-linen); }
html.newlook .ahead-title { font-weight: 400; }
html.newlook .ahead-sub, html.newlook .ahead-item span, html.newlook .ahead-ways { font-family: var(--rh-sans); font-style: normal; color: var(--rh-stone); }
html.newlook .ahead-item b { font-family: var(--rh-sans); font-weight: 500; color: var(--rh-ink); }
html.newlook .ahead-item svg { color: var(--rh-walnut); }
html.newlook .ahead-ways b { color: var(--rh-ink); font-weight: 500; }

/* "Finish later? Save your spot." bar (styled inline by the page) */
html.newlook #saveSpotBar { background: var(--rh-linen) !important; border-top: 1px solid var(--rh-rule) !important; }
html.newlook #saveSpotBar span { font-family: var(--rh-sans) !important; font-weight: 500 !important; color: var(--rh-ink) !important; }
html.newlook #saveSpotBar input { font-family: var(--rh-sans) !important; border-radius: 0 !important; }
html.newlook #btnSaveSpot { font-family: var(--rh-sans) !important; font-size: 13px !important; letter-spacing: 0 !important; text-transform: none !important;
  background: var(--rh-walnut) !important; border-radius: 0 !important; }

/* Photos: the two tiles (styled inline by the page) as Oat with a hairline */
html.newlook #screen-photos div[style*="grid-template-columns:repeat(2,1fr)"] { background: var(--rh-rule) !important; gap: 1px !important; }
html.newlook #screen-photos div[style*="grid-template-columns:repeat(2,1fr)"] > div { background: var(--rh-oat) !important; }
html.newlook #screen-photos div[style*="text-transform:uppercase"] { font-family: var(--rh-sans) !important; letter-spacing: 0 !important; text-transform: none !important; }
html.newlook #screen-photos div[style*="background:var(--burgundy)"] { background: var(--rh-walnut) !important; }
html.newlook #screen-photos div[style*="font-size:28px"] { color: var(--rh-ink) !important; font-weight: 400 !important; }
html.newlook #screen-photos div[style*="font-size:13px; color:var(--brown)"] { font-family: var(--rh-sans) !important; color: var(--rh-stone) !important; }
html.newlook .upload-zone { border: 1px dashed var(--rh-stone); border-radius: 0; background: var(--rh-linen); }
html.newlook .upload-zone * { font-family: var(--rh-sans); }
html.newlook .upload-icon { color: var(--rh-walnut); }

/* The "Saved" note: plain words, not a pill */
html.newlook .save-toast { background: transparent; color: var(--rh-stone); border-radius: 0; font-family: var(--rh-sans); font-size: 13px; letter-spacing: 0; text-transform: none; padding: 4px 0; box-shadow: none; }

/* ── Type floor (J, 1 Oct 2026: "everything needs to be bigger", nothing a
   reader has to squint at). Fine print 13px at the least, labels and notes
   15px, body 16px. Book-cover type (.cv) is a scaled miniature and is left
   alone. !important because several of these are inline styles. ── */
html.newlook .section-label { font-size: 15px !important; }
html.newlook .static-band { font-size: 15px !important; }
/* One line under every cover, so the covers stay level (J, 1 Oct). */
html.newlook .shelf-book span { font-size: 17px !important; white-space: nowrap; margin-left: -12px; margin-right: -12px; }
html.newlook .shelf-note { font-size: 18px !important; }
/* The gallery gets a real title like every other section (J: the small label read as tiny). */
html.newlook .shelf-title { text-align: center; margin: 0 auto 36px; padding: 0 16px; }
html.newlook .how-tab { font-size: 16px !important; }
html.newlook .btn-select { font-size: 16px !important; }
html.newlook .question-meta, html.newlook .required-note, html.newlook .pair-optional,
html.newlook .pair-label, html.newlook .title-divider-text, html.newlook .title-own-label,
html.newlook .si-when, html.newlook #screen-recipient label, html.newlook #screen-review label { font-size: 15px !important; }
html.newlook .cover-note, html.newlook .cover-note em, html.newlook .vibe-desc, html.newlook .upload-sub,
html.newlook .checkout-edition-detail, html.newlook .fork-sub { font-size: 14px !important; }
html.newlook .title-suggestion-text { font-size: 16px !important; }
html.newlook .cast-roles-lbl, html.newlook .fork-tag, html.newlook .review-label,
html.newlook .copies-selector-label { font-size: 13px !important; }
html.newlook .ch-send { font-size: 14px !important; }
html.newlook #screen-photos [style*="font-size"] { font-size: 14px !important; }
html.newlook #screen-thankyou-backfill [style*="font-size:10px"], html.newlook #screen-thankyou-backfill [style*="font-size:11px"] { font-size: 13px !important; }
html.newlook .price-table th, html.newlook .price-table td { font-size: 15px !important; }
html.newlook .save-toast { font-size: 14px !important; }
/* Reviews, the FAQ teaser link and the footer */
html.newlook .footer-tagline { font-size: 15px !important; }
html.newlook .footer-col-title { font-size: 13px !important; }
html.newlook .footer-links a { font-size: 15px !important; }
html.newlook .footer-copy { font-size: 13px !important; }
html.newlook .edition-price { font-size: 18px !important; }
html.newlook .edition-fine { font-size: 16px !important; }
html.newlook .section-label { font-size: 16px !important; }

/* Footer (J, 1 Oct 2026): the words were hidden (cream at 20-38% on walnut)
   and small. Readable cream on walnut, bigger type. */
html.newlook footer { background: #53392A !important; }
html.newlook .footer-tagline { color: #FBF9F2 !important; opacity: 1 !important; font-size: 17px !important; line-height: 1.6 !important; }
html.newlook .footer-col-title { color: #E3CFB2 !important; font-size: 14px !important; letter-spacing: 0.14em !important; }
html.newlook .footer-links a, .footer-social a { color: rgba(251,249,242,0.88) !important; font-size: 17px !important; }
html.newlook .footer-links a:hover, .footer-social a:hover { color: #FFFFFF !important; text-decoration: underline; }
html.newlook .footer-copy { color: rgba(251,249,242,0.72) !important; font-size: 14px !important; }
/* Phones: the longer book names get the full width, the button goes below (J, 1 Oct). */
@media (max-width: 760px) {
  html.newlook .edition-row { flex-wrap: wrap; gap: 14px; }
  html.newlook .edition-meta { flex: 1 1 100%; }
  html.newlook .edition-row .btn-select { flex: 1 1 100%; width: 100%; }
}

/* Before you begin: step numbers (J, 1 Oct 2026). */
html.newlook .ahead-num { display: block; font-family: var(--rh-serif); font-size: 30px; line-height: 1; color: var(--rh-wordmark); margin-bottom: 10px; }
html.newlook .ahead-item span:not(.ahead-num) { font-size: 15px; }
html.newlook .ahead-item b { font-size: 17px; }
@media (max-width: 760px) {
  html.newlook .ahead-num { grid-row: span 2; margin: 0; font-size: 28px; }
  html.newlook .ahead-item span:not(.ahead-num) { grid-column: 2; }
}

/* ── The cover is big on the design screens (J, 1 Oct 2026: "bigger, not a
   dinky thing in the corner"). The book takes half the screen; the choices
   sit beside it. Desktop only: phones keep their own cover size. ── */
@media (min-width: 769px) {
  html .page:has(.left-panel.cover-focus) { grid-template-columns: 50% 50%; }
  html .left-panel.cover-focus { justify-content: flex-start; align-items: center; padding-top: 28px; }
  html .left-panel.cover-focus #coverBlock { align-items: center !important; text-align: center; }
  html .left-panel.cover-focus .panel-title { display: none; }
  html .left-panel.cover-focus .book-preview.cv { height: min(68vh, 720px) !important; font-size: min(3.25vh, 34px) !important; }
}

/* The preview is not the final cover, said big enough to read (J, 1 Oct 2026). */
html .cover-note .cover-note-head { display: block; font-family: 'EB Garamond', Georgia, serif; font-style: normal; font-weight: 500; font-size: 21px !important; line-height: 1.2; color: #2B2622; margin: 0 0 6px; }
html .cover-note { opacity: 1 !important; max-width: 300px; }
@media (max-width: 768px) { html .cover-note .cover-note-head { font-size: 18px !important; } }

/* Gift card redemption, review screen (J, 2 Oct 2026): what the card covers,
   and what happens at Shopify, said before they get there. */
html .checkout-price .gift-covered { font-family: 'Hanken Grotesk', Arial, sans-serif; font-size: 16px; font-weight: 500; color: #53392A; }
html .gift-next-note { margin: 22px 0 14px; text-align: center; }
html .gift-next-note b { display: block; font-size: 17px; font-weight: 600; line-height: 1.45; color: #2B2622; }
html .gift-next-note span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.5; color: #6A625A; }