/* Karizustyle: warm white and beige base, candy pops, leopard and zebra accents.
   One deliberate light look for a brand site, so there is no dark variant. */
:root {
  color-scheme: light;
  --white: #FFFCF7;
  --beige: #F3E9DC;
  --ink: #1F1519;
  --soft: #4A3A41;
  --muted: #7A6670;
  --rule: #E6D6C2;
  --pink: #83D5D0;
  --turq-head: #0FA3A3;
  --turq-deep: #00727A;
  --pink-soft: #6FD3CF;
  --coral: #83D5D0;
  --green: #1E5E4A;
  --mustard: #F5B21B;
  --sky: #B8892B;
  --lilac: #B8892B;
  --gold: #B8892B;
  --display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --body: "Karla", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 5vw, 64px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.55; }
img { max-width: 100%; display: block; }
a { color: var(--turq-deep); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.04; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(44px, 7.4vw, 86px); }
h2 { font-size: clamp(32px, 4.6vw, 54px); }
h3 { font-size: clamp(22px, 2.4vw, 30px); }
h1 em, h2 em { font-style: italic; }
p { margin: 0; max-width: 62ch; }
.wrap { padding-inline: var(--gutter); max-width: 1280px; margin-inline: auto; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--green); }
.soft { color: var(--soft); }
.small { font-size: 14px; color: var(--muted); }

/* patterns */
.leo { background-color: #D9A25A; background-image: url(/images/leopard.svg); background-size: 240px 240px; }
.zebra { background: repeating-linear-gradient(180deg, #1F1519 0 8px, #FFFCF7 8px 16px); }
.band { height: 8px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 30px; border-radius: 2px; font: 700 13px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; border: 1px solid transparent; transition: background-color .2s, color .2s, border-color .2s; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
.btn-pink { background: var(--pink); color: var(--ink); }
.btn-pink:hover { background: var(--ink); color: var(--white); }
.btn-green { background: var(--green); color: var(--white); }
.btn-green:hover { background: var(--ink); }
.btn-ink { background: var(--ink); color: var(--white); }
.btn-ink:hover { background: var(--pink); color: var(--ink); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--white); }
.btn-sm { min-height: 42px; padding: 0 20px; font-size: 12px; }

/* preview ribbon (remove at launch) */
.preview-ribbon { background: var(--ink); color: var(--white); text-align: center; font-size: 13px; padding: 8px 16px; }
.preview-ribbon b { color: #E9C46A; }

/* header */
.site-header { background: var(--white); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; border-bottom: 1px solid var(--rule); }
.site-header .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; min-height: 80px; }
.site-header nav { display: flex; gap: 26px; flex-wrap: wrap; }
.site-header nav a { color: var(--ink); text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { color: var(--turq-deep); }
.logo img { height: 64px; width: auto; }
.header-cta { display: flex; gap: 12px; justify-content: flex-end; }
@media (max-width: 860px) {
  .site-header .wrap { grid-template-columns: auto 1fr; min-height: 68px; padding-block: 8px; }
  .site-header nav { order: 3; grid-column: 1 / -1; gap: 18px; overflow-x: auto; padding-bottom: 6px; flex-wrap: nowrap; }
  .site-header nav a { font-size: 13px; white-space: nowrap; }
  .logo { order: 1; }
  .logo img { height: 52px; }
  .header-cta { order: 2; }
  .header-cta .btn-line { display: none; }
}

/* hero */
.hero { position: relative; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 40px; align-items: center; padding-block: 56px 64px; }
.hero-copy { display: flex; flex-direction: column; gap: 20px; position: relative; }
.hero h1 em { color: var(--turq-head); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 4px; }
.hero-art { position: relative; aspect-ratio: 5 / 6; max-width: 100%; }
.hero-frame { position: absolute; inset: 4% 4% 0 6%; border-radius: 999px 999px 4px 4px; padding: 10px; box-shadow: 0 0 0 1px var(--gold), 0 0 0 9px var(--white), 0 0 0 10px var(--gold); }
.hero-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 62%; border-radius: 999px 999px 2px 2px; }
.starburst { position: absolute; right: -8%; top: -6%; width: 46%; max-width: 260px; opacity: .55; }
.heart { position: absolute; right: -2%; top: 46%; width: 34%; max-width: 176px; transform: rotate(8deg); }
.tag { position: absolute; left: 0; bottom: 4%; background: var(--green); color: var(--white); font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; text-align: center; line-height: 1.15; padding: 12px 16px; border-radius: 16px; transform: rotate(-6deg); }
.flower { position: absolute; }
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; padding-block: 32px 48px; }
  .hero-art { width: min(100%, 420px); justify-self: center; }
  .flower { display: none; }
}

/* ticker */
.ticker { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 22px; padding: 16px var(--gutter); background: var(--ink); }
.ticker span { color: var(--white); font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 22px; }
.ticker span + span::before { content: "◆"; color: var(--gold); font-size: 9px; letter-spacing: 0; }
.ticker i { display: none; }

/* doors */
.doors { background: var(--beige); padding-block: 56px; }
.doors .wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.door { display: flex; flex-direction: column; background: var(--white); border-radius: 4px; overflow: hidden; color: var(--ink); text-decoration: none; box-shadow: none !important; border: 1px solid var(--rule); }
.door .cap { height: 6px !important; }
.door .scallop { display: none; }
.door .body { display: flex; flex-direction: column; gap: 12px; padding: 30px 30px 32px !important; flex: 1; }
.door .more { margin-top: auto; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.door:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (max-width: 860px) { .doors .wrap { grid-template-columns: 1fr; gap: 24px; } }

/* menu */
.menu .wrap { display: grid; grid-template-columns: 24px minmax(0, 420px) minmax(0, 1fr); gap: 0; padding-inline: 0; }
.menu .zebra { min-height: 100%; }
.menu-intro { padding: 52px 40px; display: flex; flex-direction: column; gap: 16px; position: relative; }
.menu-list { padding: 44px var(--gutter) 44px 24px; display: flex; flex-direction: column; }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 15px 0; border-bottom: 1px solid var(--rule); font-size: 17px; }
.row b { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.row small { color: var(--muted); font-size: 14px; }
.cherries { display: none; }
@media (max-width: 860px) {
  .menu .wrap { grid-template-columns: 1fr; }
  .menu .zebra { min-height: 18px; }
  .menu-intro { padding: 40px var(--gutter) 8px; }
  .menu-list { padding: 8px var(--gutter) 40px; }
  .cherries { display: none; }
}

/* jewelry */
.jewelry { padding-block: 64px; }
.jewelry-head > div { background: var(--white); padding: 20px 26px; }
.jewelry .tile { background: var(--white); padding: 10px 10px 16px; }
.jewelry .tile .cap { padding: 0 6px; }
.jewelry .note { background: var(--white); display: inline-flex; padding: 12px 18px; margin-top: 28px; }
.jewelry-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.jewelry h2 em { color: var(--green); }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.tile { display: flex; flex-direction: column; gap: 12px; color: var(--ink); text-decoration: none; }
.tile .cap { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tile .cap span { font-family: var(--display); font-size: 21px; }
.tile .cap b { font-weight: 500; color: var(--soft); }
.tile .cap b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.frame { position: relative; aspect-ratio: 1 / 1.2; border-radius: 2px; padding: 0; background: none !important; overflow: hidden; }
.frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; transition: transform .5s; }
.tile:hover .frame img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .frame img, .tile:hover .frame img { transition: none; transform: none; } }
.frame::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255,252,247,.75); pointer-events: none; }
.scal::before { display: none; }
.jewelry .note { margin-top: 24px; display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--soft); }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
@media (max-width: 960px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .tiles { gap: 18px; } .tile .cap span { font-size: 18px; } }

/* permanent */
.permanent .wrap { display: grid; grid-template-columns: minmax(0, 432px) minmax(0, 1fr); gap: 56px; align-items: center; padding-block: 56px; }
.permanent h2 em { color: var(--turq-head); }
.perm-art { position: relative; }
.perm-art .frame { aspect-ratio: 408 / 384; }
.burst { position: absolute; left: 22px; top: 22px; background: var(--white); color: var(--ink); padding: 8px 14px; font-weight: 700; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; line-height: 1; }
.burst br { display: none; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.step { background: transparent; border-top: 1px solid var(--gold) !important; border-radius: 0; padding: 16px 0 0; display: flex; flex-direction: column; gap: 6px; }
.step h3 { font-size: 22px; }
.step p { font-size: 15px; color: var(--soft); line-height: 1.45; }
.perm-copy { display: flex; flex-direction: column; gap: 18px; }
.perm-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.leo-dot { width: 18px; height: 18px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
@media (max-width: 860px) {
  .permanent .wrap { grid-template-columns: 1fr; gap: 36px; padding-block: 40px; }
  .steps { grid-template-columns: 1fr; }
}

/* about */
.about { background: var(--beige); position: relative; overflow: hidden; }
.about .wrap { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 56px; align-items: center; padding-block: 52px; padding-right: calc(var(--gutter) + 24px); }
.about .edge { position: absolute; right: 0; top: 0; bottom: 0; width: 24px; }
.about h2 em { color: var(--green); }
.about-art { position: relative; }
.arch { border-radius: 999px 999px 4px 4px; padding: 10px; box-shadow: 0 0 0 1px var(--gold), 0 0 0 9px var(--beige), 0 0 0 10px var(--gold); aspect-ratio: 336 / 380; }
.arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; border-radius: 999px 999px 2px 2px; }
.badge { display: none; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chips { gap: 8px 18px; }
.chips span { background: none !important; padding: 0; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--green); }
.chips span + span::before { content: "◆"; color: var(--gold); margin-right: 18px; font-size: 9px; }
@media (max-width: 860px) {
  .about .wrap { grid-template-columns: 1fr; gap: 32px; }
  .about-art { width: min(100%, 320px); }
}

/* markets */
.markets .wrap { padding-block: 36px; }
.markets .panel { display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; background: var(--green); color: var(--white); border-radius: 4px; padding: 36px 40px; position: relative; overflow: hidden; }
.markets .panel > div { display: flex; flex-direction: column; gap: 10px; position: relative; }
.markets h2 { font-size: clamp(28px, 3.4vw, 40px); }
.markets .eyebrow { color: #E9C46A; }
.markets a.btn { position: relative; background: transparent; color: var(--white); border-color: var(--white); }
.markets a.btn:hover { background: var(--white); color: var(--ink); }
.ball { display: none; }

/* footer */
.site-footer { background: var(--beige); padding-block: 40px 28px; font-size: 15px; }
.site-footer .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.site-footer h3 { font-family: var(--body); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--green); margin-bottom: 10px; }
.site-footer a { color: var(--ink); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.site-footer .logo img { height: 56px; width: auto; margin-left: -8px; }
.site-footer .fine { grid-column: 1 / -1; border-top: 1px solid var(--rule); padding-top: 16px; font-size: 13px; color: var(--muted); }
@media (max-width: 860px) { .site-footer .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .site-footer .wrap { grid-template-columns: 1fr; } }

/* inner pages */
.page-hero { padding-block: 48px 36px; }
.page-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 48px; align-items: center; }
.page-hero h1 { font-size: clamp(40px, 6vw, 72px); }
.page-hero h1 em { color: var(--turq-head); }
.lede { font-size: 19px; color: var(--soft); }
.prose { display: flex; flex-direction: column; gap: 14px; }
.content { padding-block: 40px 56px; }
.content .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.card { background: var(--white); border-radius: 4px; border: 1px solid var(--rule); padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.faq dt { font-family: var(--display); font-size: 22px; margin-top: 12px; }
.faq dd { margin: 4px 0 0; color: var(--soft); }
@media (max-width: 860px) {
  .page-hero .wrap, .content .wrap { grid-template-columns: 1fr; gap: 28px; }
}

/* grown-up pass: no cartoon pieces */
.flower, .heart, .tag { display: none !important; }
.hero h1 { font-size: clamp(46px, 7vw, 92px); }
.market-list { list-style: none; margin: 0; padding: 0; flex-basis: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; position: relative; }
.market-list li { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid rgba(255, 252, 247, .35); border-radius: 2px; }
.market-list b { font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1.15; }
.market-list span { font-size: 14px; opacity: .9; }
.market-list span:nth-of-type(1) { color: #E9C46A; opacity: 1; font-weight: 700; }

/* Questions (home page FAQ) */
.questions .wrap { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 56px; align-items: start; padding-block: 52px; }
.questions h2 em { color: var(--turq-head); }
.qa details { border-top: 1px solid rgba(31, 21, 25, .16); }
.qa details:last-child { border-bottom: 1px solid rgba(31, 21, 25, .16); }
.qa summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-family: var(--display); font-size: 22px; line-height: 1.2; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font-family: var(--body, inherit); font-size: 26px; color: var(--turq-deep); flex: none; transition: transform .2s; }
.qa details[open] summary::after { transform: rotate(45deg); }
.qa details p { margin: 0 0 18px; color: var(--soft); font-size: 16px; line-height: 1.5; max-width: 62ch; }
@media (max-width: 760px) {
  .questions .wrap { grid-template-columns: 1fr; gap: 20px; padding-block: 40px; }
  .qa summary { font-size: 19px; }
}

/* Client reviews (excerpts from Google) */
.reviews { background: var(--white); }
.reviews .wrap { padding-block: 52px; }
.reviews-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.reviews h2 em { color: var(--turq-head); }
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.review { margin: 0; background: var(--beige); border-radius: 4px; padding: 24px 24px 20px; display: flex; flex-direction: column; gap: 12px; }
.review .stars { color: #C9A227; letter-spacing: .12em; font-size: 15px; }
.review blockquote { margin: 0; font-family: var(--display); font-size: 21px; line-height: 1.3; }
.review figcaption { margin-top: auto; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }

/* Gift picks */
.gifts .gift-group + .gift-group { margin-top: 40px; }
.gift-head { background: var(--white); display: inline-block; padding: 14px 20px; border-radius: 4px; margin-bottom: 18px; }
.gift-head h2 { font-size: clamp(26px, 3vw, 36px); }
.gift-head p { margin: 4px 0 0; font-size: 15px; }

/* ===== Brownie theme (2026-10-21, Jackie: "the browns"): warm, moody, earthy, like Esti's "Brownie Filter".
   Espresso / cocoa / caramel / cream. No leopard, no zebra, no candy pops. Photos get a soft warm grade. ===== */
:root {
  --white: #F6EFE6;
  --beige: #EBDFCF;
  --ink: #2B211B;
  --soft: #5A4A3E;
  --muted: #8A7868;
  --rule: #DCCDB9;
  --pink: #B08A62;
  --turq-head: #8B5E3C;
  --turq-deep: #6B4F3A;
  --pink-soft: #B08A62;
  --coral: #B08A62;
  --green: #3A2C22;
  --mustard: #A07A52;
  --sky: #A07A52;
  --lilac: #A07A52;
  --gold: #A88763;
  --espresso: #241B16;
  --brownie: #3A2C22;
  --cocoa: #4A3728;
  --caramel: #B08A62;
  --cream: #EADBC8;
}
body { background: var(--white); }
.leo { background: var(--cocoa) !important; background-image: none !important; }
.leo.band { height: 6px !important; min-height: 0 !important; background: var(--cocoa) !important; }
.zebra { background: var(--cocoa) !important; }
.starburst, .ball, .flower, .heart, .tag, .scallop { display: none !important; }
.ticker { background: var(--espresso) !important; }
.ticker span { color: var(--cream); }
.ticker span + span::before { color: var(--caramel); }
.door { box-shadow: none !important; border: 1px solid var(--rule); }
.door .cap { background: var(--caramel) !important; }
[style*="color:#00727A"], [style*="color:#00727a"], [style*="color:#8A5A1E"], [style*="color:#1E5E4A"], [style*="color:#1e5e4a"] { color: var(--turq-deep) !important; }
.door, .door h3 { color: var(--ink) !important; }
.door .soft { color: var(--soft) !important; }
.door .more, .door .eyebrow { color: var(--turq-deep) !important; }
.step { border-top-color: var(--rule) !important; }
.dot { background: var(--caramel) !important; }
.review .stars { color: var(--caramel); }
.preview-ribbon b { color: var(--caramel); }
.btn-pink { background: var(--caramel); color: var(--espresso); }
.btn-pink:hover { background: var(--espresso); color: var(--cream); }
.btn-ink { background: var(--espresso); color: var(--cream); }
.btn-ink:hover { background: var(--caramel); color: var(--espresso); }
.btn-green { background: var(--cocoa); color: var(--cream); }
.btn-green:hover { background: var(--espresso); }
.hero, .page-hero { background: var(--espresso); color: var(--cream); }
.hero h1, .page-hero h1 { color: #F3E7D8; }
.hero h1 em, .page-hero h1 em { color: var(--caramel); }
.hero .soft, .page-hero .soft, .page-hero .lede, .hero .small { color: #CDBBA6; }
.hero .eyebrow, .page-hero .eyebrow { color: var(--caramel) !important; }
.hero .btn-line, .page-hero .btn-line { color: var(--cream); border-color: var(--cream); }
.hero .btn-line:hover, .page-hero .btn-line:hover { background: var(--cream); color: var(--espresso); }
.hero-frame, .arch { box-shadow: 0 0 0 1px var(--caramel), 0 0 0 9px var(--espresso), 0 0 0 10px var(--caramel) !important; background: var(--espresso) !important; }
.about .arch { box-shadow: 0 0 0 1px var(--gold), 0 0 0 9px var(--beige), 0 0 0 10px var(--gold) !important; background: var(--beige) !important; }
.jewelry { background: var(--brownie) !important; }
.jewelry-head > div, .jewelry .tile, .jewelry .note, .gift-head { background: var(--white); }
.markets .panel { background: var(--brownie); color: var(--cream); }
.markets .eyebrow, .market-list span:nth-of-type(1) { color: var(--caramel) !important; }
.markets a.btn { color: var(--cream); border-color: var(--cream); }
.site-footer { background: var(--espresso); color: var(--cream); }
.site-footer a { color: var(--cream); }
.site-footer h3 { color: var(--caramel); }
.site-footer .fine { color: #A8957F; border-top-color: rgba(234, 219, 200, .2); }
.site-footer .logo img { filter: invert(.92) sepia(.25) brightness(1.02); }
.qa summary::after { color: var(--turq-deep); }
.qa details { border-color: rgba(43, 33, 27, .16) !important; }
.hero-frame img, .arch img, .perm-art img, .about-art img { filter: sepia(.24) saturate(.8) contrast(1.04) brightness(.95); }
.tile .frame img { filter: saturate(.8) sepia(.08); }

/* ===== More gold (2026-10-21, Jackie: "add more gold tones") — metallic gold accents on the browns ===== */
:root {
  --caramel: #C9A252;          /* rich gold replaces caramel everywhere the brownie theme used it */
  --gold: #C9A252;
  --gold-light: #E6CF94;
  --gold-deep: #9A7630;
  --turq-head: #9A7630;        /* italic headline words on cream = deep gold */
  --gold-sheen: linear-gradient(135deg, #A9822F 0%, #E6CF94 45%, #C9A252 60%, #9A7630 100%);
}
/* metallic gold primary buttons */
.btn-pink { background: var(--gold-sheen); color: var(--espresso); border-color: transparent; }
.btn-pink:hover { background: var(--espresso); color: var(--gold-light); border-color: var(--gold); }
.btn-ink, .btn-green { border: 1px solid var(--gold); }
.btn-ink:hover, .btn-green:hover { background: var(--gold-sheen); color: var(--espresso); }
.hero .btn-line, .page-hero .btn-line, .markets a.btn { border-color: var(--gold); color: var(--gold-light); }
.hero .btn-line:hover, .page-hero .btn-line:hover, .markets a.btn:hover { background: var(--gold-sheen); color: var(--espresso); }
/* gold type on dark */
.hero h1 em, .page-hero h1 em { color: var(--gold); background: var(--gold-sheen); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero .eyebrow, .page-hero .eyebrow, .markets .eyebrow, .site-footer h3 { color: var(--gold) !important; }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { color: var(--gold-deep); }
/* gold lines and frames */
.leo.band { height: 3px !important; background: var(--gold-sheen) !important; }
.ticker { border-top: 1px solid rgba(201, 162, 82, .45); border-bottom: 1px solid rgba(201, 162, 82, .45); }
.ticker span + span::before { color: var(--gold); }
.door .cap { background: var(--gold-sheen) !important; height: 4px !important; }
.door { border-color: rgba(201, 162, 82, .45); }
.card { border-color: rgba(201, 162, 82, .45); }
.step { border-top-color: rgba(201, 162, 82, .6) !important; }
.row { border-bottom-color: rgba(201, 162, 82, .3); }
.hero-frame, .arch { box-shadow: 0 0 0 1px var(--gold), 0 0 0 9px var(--espresso), 0 0 0 10px var(--gold-light) !important; }
.about .arch { box-shadow: 0 0 0 1px var(--gold), 0 0 0 9px var(--beige), 0 0 0 10px var(--gold) !important; }
.jewelry-head > div, .jewelry .tile, .jewelry .note, .gift-head { box-shadow: inset 0 0 0 1px rgba(201, 162, 82, .55); }
.frame::after { border-color: rgba(230, 207, 148, .8); }
.markets .panel { box-shadow: inset 0 0 0 1px rgba(201, 162, 82, .5); }
.market-list li { border-color: rgba(201, 162, 82, .45); }
.site-footer { border-top: 3px solid var(--gold); }
.site-footer .logo img { filter: invert(.85) sepia(.9) saturate(1.6) hue-rotate(5deg) brightness(.95); }
.dot { background: var(--gold) !important; }
.review { box-shadow: inset 0 3px 0 var(--gold); }
.review .stars { color: var(--gold); }
.qa summary::after { color: var(--gold-deep); }
.preview-ribbon b { color: var(--gold-light); }

/* ===== Swap (2026-10-21, Jackie): GOLD hero, rich CHOCOLATE buttons, stronger gold accents ===== */
:root {
  --chocolate: #4A2717;        /* rich chocolate for buttons */
  --chocolate-deep: #331A0E;   /* button hover + dark sections */
  --espresso: #2E180D;         /* dark sections now read as dark chocolate, not near-black */
  --brownie: #3D2113;
  --cocoa: #5A3320;
  --hero-gold: linear-gradient(135deg, #B88E3E 0%, #D9BC79 38%, #E8D29B 52%, #CDA75A 70%, #A9802F 100%);
}
/* gold hero (home + inner pages) with chocolate type */
.hero, .page-hero { background: var(--hero-gold) !important; color: var(--chocolate-deep); }
.hero h1, .page-hero h1 { color: var(--chocolate-deep); }
.hero h1 em, .page-hero h1 em { background: none; -webkit-text-fill-color: var(--chocolate); color: var(--chocolate); }
.hero .soft, .page-hero .soft, .page-hero .lede, .hero .small { color: #4A2E1C; }
.hero .eyebrow, .page-hero .eyebrow { color: var(--chocolate) !important; }
.hero-frame, .arch { box-shadow: 0 0 0 1px var(--chocolate), 0 0 0 9px #E2C98C, 0 0 0 10px var(--chocolate) !important; background: #E2C98C !important; }
.about .arch { box-shadow: 0 0 0 1px var(--gold), 0 0 0 9px var(--beige), 0 0 0 10px var(--gold) !important; background: var(--beige) !important; }
/* chocolate buttons everywhere, gold on hover */
.btn-pink, .btn-ink, .btn-green { background: var(--chocolate); color: #F6EFE6; border: 1px solid var(--chocolate); -webkit-text-fill-color: currentColor; }
.btn-pink:hover, .btn-ink:hover, .btn-green:hover { background: var(--chocolate-deep); color: var(--gold-light); border-color: var(--gold); }
.hero .btn-line, .page-hero .btn-line { color: var(--chocolate-deep); border-color: var(--chocolate-deep); }
.hero .btn-line:hover, .page-hero .btn-line:hover { background: var(--chocolate-deep); color: var(--gold-light); }
.site-header .btn-pink { background: var(--chocolate); color: #F6EFE6; }
/* strip under the hero: chocolate with gold lettering */
.ticker { background: var(--chocolate-deep) !important; border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold); }
.ticker span { color: var(--gold-light); }
.ticker span + span::before { color: var(--gold); }
/* stronger gold accents */
.eyebrow { color: var(--gold-deep) !important; }
.jewelry .eyebrow, .door .eyebrow, .card .eyebrow, .reviews .eyebrow, .questions .eyebrow { color: var(--gold-deep) !important; }
.door .more { color: var(--gold-deep) !important; }
.door .cap { height: 5px !important; }
.jewelry, .markets .panel { background: var(--brownie) !important; }
.markets .panel { box-shadow: inset 0 0 0 1px var(--gold); }
.markets .eyebrow, .market-list span:nth-of-type(1), .site-footer h3 { color: var(--gold) !important; }
.markets a.btn { border-color: var(--gold); color: var(--gold-light); }
.site-footer { background: var(--espresso); border-top: 4px solid var(--gold); }
.leo.band { height: 4px !important; }
.jewelry .btn-ink { border-color: var(--gold); }
.menu .zebra, .about .zebra { background: var(--gold-sheen) !important; }
.row b { color: var(--chocolate); }

/* ===== Hero = caramel tan (2026-10-21, Jackie: "too gold, it needs to be this tan" = the brownie-theme button tan #B08A62) ===== */
:root { --hero-tan: #B08A62; }
.hero, .page-hero { background: var(--hero-tan) !important; }
.hero .soft, .page-hero .soft, .page-hero .lede, .hero .small { color: #3A2214; }
.hero-frame, .arch { box-shadow: 0 0 0 1px var(--chocolate), 0 0 0 9px #C9A57E, 0 0 0 10px var(--chocolate) !important; background: #C9A57E !important; }
.about .arch { box-shadow: 0 0 0 1px var(--gold), 0 0 0 9px var(--beige), 0 0 0 10px var(--gold) !important; background: var(--beige) !important; }

/* ===== Rich browns (2026-10-21, Jackie's mood boards: Pantone 19-1015 TCX Espresso #4C3324, chocolate,
   gold-foil lettering on brown leather, sand/stone backgrounds) ===== */
:root {
  --chocolate: #4C3324;        /* Pantone Espresso: all buttons */
  --chocolate-deep: #35231A;   /* hover, strip under the hero */
  --espresso: #2C1E16;         /* footer */
  --brownie: #4C3324;          /* jewelry + markets sections = Espresso */
  --cocoa: #5E4232;
  --gold: #C2A15A;             /* gold foil */
  --gold-light: #DCC48E;
  --gold-deep: #9C7C3A;
  --white: #F4EEE6;            /* warm stone-cream page */
  --beige: #E7DCCD;            /* sand */
  --ink: #2C1E16;
}
.btn-pink, .btn-ink, .btn-green, .site-header .btn-pink { background: var(--chocolate); color: #F4EEE6; border-color: var(--chocolate); }
.btn-pink:hover, .btn-ink:hover, .btn-green:hover { background: var(--chocolate-deep); color: var(--gold-light); border-color: var(--gold); }
.ticker { background: var(--chocolate-deep) !important; }
.jewelry, .markets .panel { background: var(--brownie) !important; }
.site-footer { background: var(--espresso); }
.hero h1, .page-hero h1 { color: #2C1E16; }
.hero h1 em, .page-hero h1 em { -webkit-text-fill-color: #4C3324; color: #4C3324; }
.hero-frame, .arch { box-shadow: 0 0 0 1px #4C3324, 0 0 0 9px #C9A57E, 0 0 0 10px #4C3324 !important; }
.about .arch { box-shadow: 0 0 0 1px var(--gold), 0 0 0 9px var(--beige), 0 0 0 10px var(--gold) !important; background: var(--beige) !important; }
.row b { color: #4C3324; }

/* ===== Pantone pair (2026-10-21, Jackie's board): Chocolate Brown 19-0912 TCX #442E23 + Coconut Milk 11-0608 TCX #ECE6DB, gold accents ===== */
:root {
  --chocolate: #442E23;
  --chocolate-deep: #33221A;
  --brownie: #442E23;
  --espresso: #2E1F18;
  --white: #ECE6DB;            /* Coconut Milk = main page background */
  --beige: #E2D9CB;            /* a shade deeper for alternating sections */
  --rule: #D5C9B7;
  --ink: #2E1F18;
}
.btn-pink, .btn-ink, .btn-green, .site-header .btn-pink { background: var(--chocolate); border-color: var(--chocolate); color: #ECE6DB; }
.jewelry, .markets .panel { background: var(--brownie) !important; }
.hero h1 em, .page-hero h1 em { -webkit-text-fill-color: #442E23; color: #442E23; }
.hero-frame, .arch { box-shadow: 0 0 0 1px #442E23, 0 0 0 9px #C9A57E, 0 0 0 10px #442E23 !important; }
.about .arch { box-shadow: 0 0 0 1px var(--gold), 0 0 0 9px var(--beige), 0 0 0 10px var(--gold) !important; background: var(--beige) !important; }
.row b { color: #442E23; }
.card, .door, .review, .jewelry-head > div, .jewelry .tile, .jewelry .note, .gift-head { background: #F3EFE8; }

/* Hero = Latte #D8C6AD (2026-10-21, Jackie picked option 1 over the camel) */
:root { --hero-tan: #D8C6AD; }
.hero, .page-hero { background: #D8C6AD !important; }
.hero .soft, .page-hero .soft, .page-hero .lede, .hero .small { color: #4A3426; }
.hero-frame, .arch { box-shadow: 0 0 0 1px #442E23, 0 0 0 9px #E8DCC9, 0 0 0 10px #442E23 !important; background: #E8DCC9 !important; }
.about .arch { box-shadow: 0 0 0 1px var(--gold), 0 0 0 9px var(--beige), 0 0 0 10px var(--gold) !important; background: var(--beige) !important; }

/* No photo washes (2026-10-21, Jackie: "dont change the photo washes") — photos show exactly as shot */
.hero-frame img, .arch img, .perm-art img, .about-art img, .tile .frame img, .frame img { filter: none !important; }