/* ============ TOKENS ============ */
:root{
  --charcoal:#1d2a30;
  --charcoal-2:#283943;
  --ivory:#f7f1e3;
  --ivory-2:#efe5cc;
  --saffron:#e8a33d;
  --saffron-dark:#c87c22;
  --blue-dome:#2f6f8f;
  --ink:#232323;
  --radius-lg:28px;
  --radius-md:16px;
  --radius-sm:10px;
  --shadow-1:0 10px 30px -12px rgba(29,42,48,.35);
  --shadow-2:0 2px 10px rgba(29,42,48,.18);
  --font-display: "Iowan Old Style","Palatino Linotype",Georgia,serif;
  --font-body: "Avenir Next","Segoe UI",system-ui,sans-serif;
  --measure:68ch;
  --container:1220px;
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--ivory);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);margin:0 0 .4em;line-height:1.1}
p{margin:0 0 1em;line-height:1.6}
:focus-visible{outline:3px solid var(--saffron);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important}}

.container{max-width:var(--container);margin:0 auto;padding:0 24px}

/* ============ UTILITIES ============ */
.u-grid{display:grid;gap:24px}
.u-grid-2{grid-template-columns:repeat(2,1fr)}
.u-grid-3{grid-template-columns:repeat(3,1fr)}
.u-mt-lg{margin-top:64px}
.u-mt-md{margin-top:32px}
.u-center{text-align:center}
.u-eyebrow{font-family:var(--font-body);text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;color:var(--saffron-dark);font-weight:700}
@media (max-width:760px){.u-grid-2,.u-grid-3{grid-template-columns:1fr}}

/* ============ REVEAL ============ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in-view{opacity:1;transform:none}
.reveal-stagger > *{transition-delay:calc(var(--i,0) * 90ms)}

/* ============ HEADER ============ */
.site-header{position:sticky;top:0;z-index:40;background:rgba(247,241,227,.92);backdrop-filter:blur(8px);border-bottom:1px solid rgba(29,42,48,.1)}
.header-inner{max-width:var(--container);margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:20px;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px}
.logo-mark{flex:none;width:40px;height:40px}
.logo-word{font-family:var(--font-display);font-size:1.25rem;color:var(--charcoal)}
.logo-word em{color:var(--saffron-dark);font-style:normal}
.main-nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.main-nav a{font-weight:600;font-size:.95rem;position:relative;padding:4px 0}
.main-nav a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--saffron-dark);transition:width .3s ease}
.main-nav a:hover::after,.main-nav a.is-active::after{width:100%}
.main-nav a.is-active{color:var(--saffron-dark)}
.header-actions{display:flex;align-items:center;gap:14px}
.cart-link{position:relative;display:flex}
.cart-count{position:absolute;top:-8px;right:-10px;background:var(--saffron-dark);color:#fff;border-radius:999px;font-size:.68rem;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;padding:0 3px}
.cart-count.bump{animation:bump .4s ease}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;color:var(--charcoal)}
@media (max-width:860px){
  .main-nav{position:fixed;top:0;right:0;height:100vh;width:min(320px,80vw);background:var(--charcoal);padding:100px 28px 28px;transform:translateX(100%);visibility:hidden;transition:transform .35s ease,visibility .35s ease;z-index:50}
  .main-nav.is-open{transform:translateX(0);visibility:visible}
  .main-nav ul{flex-direction:column;gap:22px}
  .main-nav a{color:var(--ivory)}
  .nav-toggle{display:flex}
}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;border-radius:999px;font-weight:700;font-size:.95rem;border:2px solid transparent;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;min-height:44px}
.btn span,.btn svg{position:relative;z-index:2}
.btn::before{content:"";position:absolute;inset:0;left:-100%;width:100%;background:var(--charcoal);transition:left .35s ease;z-index:1}
.btn-primary{background:var(--saffron);color:var(--charcoal)}
.btn-primary::before{background:var(--saffron-dark)}
.btn-primary:hover::before{left:0}
.btn-primary:hover{color:#fff}
.btn-dark{background:var(--charcoal);color:var(--ivory)}
.btn-dark::before{background:var(--blue-dome)}
.btn-dark:hover::before{left:0}
.btn-ghost{background:transparent;color:var(--charcoal);border-color:var(--charcoal)}
.btn-ghost::before{background:var(--charcoal)}
.btn-ghost:hover::before{left:0}
.btn-ghost:hover{color:var(--ivory)}
.btn-block{width:100%}
.btn-sm{padding:9px 18px;font-size:.85rem;min-height:38px}

/* ============ HERO (home) ============ */
.hero{position:relative;overflow:hidden;background:var(--charcoal);color:var(--ivory)}
.hero-grid{max-width:var(--container);margin:0 auto;padding:80px 24px 60px;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.hero-eyebrow{color:var(--saffron);text-transform:uppercase;letter-spacing:.18em;font-size:.8rem;font-weight:700}
.hero h1{font-size:clamp(2.6rem,6vw,4.6rem);color:var(--ivory)}
.hero p.lead{font-size:1.1rem;max-width:42ch;color:var(--ivory-2)}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:20px}
.hero-art{position:relative;aspect-ratio:1/1;max-width:440px}
.hero-art .layer{position:absolute;inset:0;transition:transform 1s cubic-bezier(.2,.8,.2,1),opacity 1s ease}
.hero-art.in-view .layer-1{transform:translate(0,0)}
.hero-art .layer-1{transform:translate(-16px,10px)}
.hero-art .layer-2{transform:translate(14px,-8px)}
.hero-art.in-view .layer-2{transform:translate(0,0)}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr;padding-top:50px}}

/* ============ HOME: sticky narrative / scroll ============ */
.story{max-width:var(--container);margin:0 auto;padding:80px 24px;display:grid;grid-template-columns:.9fr 1.4fr;gap:60px}
.story-sticky{position:sticky;top:110px;align-self:start}
.story-sticky h2{font-size:clamp(1.9rem,3.6vw,2.6rem)}
.story-scroll{display:flex;flex-direction:column;gap:56px}
.story-block{padding:28px;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-2)}
.story-block h3{color:var(--charcoal)}
@media (max-width:900px){.story{grid-template-columns:1fr}.story-sticky{position:static}}

/* ============ SECTION DIVIDERS / MEANDER ============ */
.meander{color:var(--saffron-dark);opacity:.6;line-height:0}
.divider-wave{width:100%;height:40px;color:var(--blue-dome)}

/* ============ PRODUCT STRIP / CARDS ============ */
.strip-head{display:flex;justify-content:space-between;align-items:baseline;max-width:var(--container);margin:0 auto;padding:0 24px}
.product-strip{display:grid;grid-auto-flow:column;grid-auto-columns:280px;gap:22px;overflow-x:auto;padding:30px 24px 10px;scroll-snap-type:x mandatory;max-width:var(--container);margin:0 auto}
@media (min-width:860px){.product-strip{grid-auto-flow:row;grid-auto-columns:unset;grid-template-columns:repeat(4,1fr);overflow:visible}}
.product-card{scroll-snap-align:start;background:#fff;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-2);transition:transform .35s ease,box-shadow .35s ease;display:flex;flex-direction:column}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-1)}
.product-card .thumb{aspect-ratio:4/3;overflow:hidden}
.product-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.product-card:hover .thumb img{transform:scale(1.07)}
.product-card .body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.product-card .cat{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--saffron-dark);font-weight:700}
.product-card .price{font-weight:800;font-size:1.1rem;margin-top:auto}

/* ============ SIGNATURE FEATURE: engraving preview ============ */
.engrave-tool{background:var(--ivory-2);border-radius:var(--radius-lg);padding:48px 32px;max-width:var(--container);margin:80px auto;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.engrave-preview{background:var(--charcoal);border-radius:var(--radius-md);padding:30px;display:flex;align-items:center;justify-content:center;min-height:320px}
.engrave-preview svg{width:100%;height:auto;max-width:260px}
.engrave-text{font-family:"Brush Script MT",cursive;fill:var(--ivory)}
.engrave-text.style-block{font-family:var(--font-body);font-weight:800;letter-spacing:.04em}
.engrave-controls .field{margin-bottom:16px}
.style-switch{display:flex;gap:10px;margin-bottom:20px}
.style-switch button{flex:1;padding:10px;border-radius:999px;border:2px solid var(--charcoal);background:transparent;cursor:pointer;font-weight:700}
.style-switch button.is-active{background:var(--charcoal);color:var(--ivory)}
@media (max-width:760px){.engrave-tool{grid-template-columns:1fr}}

/* ============ FORMS ============ */
.form-grid{display:grid;gap:18px}
.form-grid.cols-2{grid-template-columns:1fr 1fr}
@media (max-width:600px){.form-grid.cols-2{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:700;font-size:.88rem}
.field input,.field select,.field textarea{
  font:inherit;padding:12px 14px;border-radius:var(--radius-sm);border:1.6px solid rgba(29,42,48,.25);background:#fff;accent-color:var(--saffron-dark);min-height:44px
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--saffron-dark)}
.field-error{color:#b3261e;font-size:.82rem;min-height:1.1em}
.hp-field{position:absolute;left:-9999px;opacity:0}
.form-msg{min-height:1.4em;font-weight:700}
.form-msg.is-success{color:#2f6f3e}
.form-msg.is-error{color:#b3261e}

/* ============ NEWSLETTER / FOOTER ============ */
.site-footer{background:var(--charcoal);color:var(--ivory-2);margin-top:60px}
.footer-inner{max-width:var(--container);margin:0 auto;padding:50px 24px;display:grid;grid-template-columns:1.2fr 2fr 1fr;gap:40px}
.footer-brand p{color:rgba(239,229,204,.75)}
.footer-mail{display:inline-flex;gap:8px;align-items:center;font-weight:700;color:var(--saffron)}
.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.footer-col h3{font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--saffron);margin-bottom:10px}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.footer-col a:hover{text-decoration:underline}
.newsletter-form{display:flex;flex-direction:column;gap:10px}
.newsletter-form .field label{color:var(--ivory-2)}
.footer-bottom{text-align:center;padding:18px;border-top:1px solid rgba(247,241,227,.12);font-size:.82rem;color:rgba(239,229,204,.6)}
@media (max-width:860px){.footer-inner{grid-template-columns:1fr}.footer-links{grid-template-columns:1fr 1fr}}

/* ============ COOKIE BANNER ============ */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;max-width:620px;margin:0 auto;background:var(--charcoal);color:var(--ivory);padding:18px 22px;border-radius:var(--radius-md);box-shadow:var(--shadow-1);z-index:60;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.cookie-banner a{color:var(--saffron);text-decoration:underline}
.cookie-actions{display:flex;gap:10px}

/* ============ INNER PAGE COMPONENTS ============ */
.page-hero{background:var(--charcoal);color:var(--ivory);padding:70px 24px 50px;text-align:center}
.page-hero h1{font-size:clamp(2rem,4.5vw,3.2rem);color:var(--ivory)}
.page-hero p{color:var(--ivory-2);max-width:60ch;margin:0 auto}

.breadcrumbs{max-width:var(--container);margin:18px auto 0;padding:0 24px;font-size:.85rem;color:rgba(29,42,48,.6)}
.breadcrumbs a:hover{text-decoration:underline}

.prose{max-width:var(--measure);margin:0 auto;padding:50px 24px}
.prose h2{margin-top:1.6em}
.prose ul,.prose ol{padding-left:1.4em}
.prose li{margin-bottom:.5em}

.legal-toc{background:#fff;border-radius:var(--radius-md);padding:24px;box-shadow:var(--shadow-2);margin:0 auto 30px;max-width:var(--measure)}
.legal-toc ol{margin:0;padding-left:1.2em}

.notice{border-radius:var(--radius-sm);padding:16px 20px;margin:0 auto 24px;max-width:var(--measure);font-weight:600}
.notice-info{background:#e7f1f6;color:#1d4c5c}
.notice-warn{background:#fdf0dc;color:#7a4b0f}
.notice-success{background:#e4f3e4;color:#2f6f3e}

.faq{max-width:var(--measure);margin:0 auto;padding:20px 24px 60px;display:flex;flex-direction:column;gap:12px}
.faq-item{background:#fff;border-radius:var(--radius-sm);box-shadow:var(--shadow-2);padding:4px 20px}
.faq-item summary{cursor:pointer;font-weight:700;padding:16px 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq-item summary::after{content:"+";font-size:1.4rem;color:var(--saffron-dark)}
.faq-item[open] summary::after{content:"\2212"}
.faq-item p{padding-bottom:16px}

.product-detail{max-width:var(--container);margin:0 auto;padding:50px 24px;display:grid;grid-template-columns:1fr 1fr;gap:50px}
.product-detail .gallery{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3}
.product-detail .gallery img{width:100%;height:100%;object-fit:cover}
.product-detail .price{font-size:1.6rem;font-weight:800;color:var(--saffron-dark)}
@media (max-width:860px){.product-detail{grid-template-columns:1fr}}

.cart-table{width:100%;border-collapse:collapse;max-width:var(--container);margin:0 auto}
.cart-table th,.cart-table td{padding:14px;border-bottom:1px solid rgba(29,42,48,.12);text-align:left}
.cart-table img{width:64px;height:64px;object-fit:cover;border-radius:var(--radius-sm)}
.cart-summary{max-width:420px;margin:30px auto 0;background:#fff;border-radius:var(--radius-md);padding:24px;box-shadow:var(--shadow-2)}
.cart-summary .row{display:flex;justify-content:space-between;padding:8px 0}
.cart-summary .row.total{font-weight:800;font-size:1.2rem;border-top:1px solid rgba(29,42,48,.15);margin-top:8px}

.contact-layout{max-width:var(--container);margin:0 auto;padding:50px 24px;display:grid;grid-template-columns:1fr 1fr;gap:50px}
.contact-info{display:flex;flex-direction:column;gap:18px}
.contact-info .row{display:flex;gap:12px;align-items:flex-start}
@media (max-width:860px){.contact-layout{grid-template-columns:1fr}}

.badge-seal{width:120px;height:120px}

/* ============ CATALOG & PRODUCT PAGES ============ */
.product-grid{display:grid;gap:24px;grid-template-columns:repeat(3,1fr);max-width:var(--container);margin:0 auto}
@media (max-width:860px){.product-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.product-grid{grid-template-columns:1fr}}
.product-gallery{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:1/1}
.product-gallery .gallery-main{width:100%;height:100%;overflow:hidden;background:#f5f5f5}
.product-gallery img{width:100%;height:100%;object-fit:contain;padding:10px}
.product-info{display:flex;flex-direction:column;gap:20px}
.product-price{font-size:1.8rem;font-weight:800;color:var(--saffron-dark);margin:0}
.product-short{font-size:0.9rem;color:var(--charcoal-2);margin:0}
.add-to-cart-form{display:flex;flex-direction:column;gap:18px;margin-top:20px}
.engrave-section h3{font-size:1rem;margin:0 0 16px;color:var(--charcoal)}
.engrave-section .field{margin-bottom:12px}

/* ============ CONTACT PAGE ============ */
.contact-form{background:#fff;border-radius:var(--radius-md);padding:28px;box-shadow:var(--shadow-2)}
.contact-details{display:flex;flex-direction:column;gap:8px}
.contact-details h3{font-size:0.95rem;font-weight:800;margin:0;color:var(--charcoal)}
.contact-details p{margin:0;font-size:0.95rem}

/* ============ CART PAGE ============ */
.cart-table{max-width:var(--container);margin:0 auto;width:100%;border-collapse:collapse;margin-bottom:40px}
.cart-header,.cart-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 0.5fr;gap:16px;padding:14px;border-bottom:1px solid rgba(29,42,48,.12);align-items:center}
.cart-header{background:var(--ivory-2);font-weight:700;border-bottom:2px solid rgba(29,42,48,.2)}
.cart-row{background:#fff}
.checkout-form{max-width:420px;margin:40px auto;background:#fff;border-radius:var(--radius-md);padding:28px;box-shadow:var(--shadow-2)}
.checkout-form h3{font-size:1.1rem;margin:24px 0 16px;color:var(--charcoal)}
.checkout-form h3:first-child{margin-top:0}
.summary-row{display:flex;justify-content:space-between;padding:12px 0;font-weight:700;border-top:1px solid rgba(29,42,48,.1);margin-top:12px}
.summary-note{font-size:0.85rem;color:var(--charcoal-2);margin:12px 0 0;font-weight:normal}

/* COMPONENTS: .container - centered max-width wrapper
COMPONENTS: .u-grid / .u-grid-2 / .u-grid-3 - grid utility layouts
COMPONENTS: .reveal / .reveal-stagger - scroll-reveal animation hooks
COMPONENTS: .site-header / .main-nav / .cart-link / .cart-count / .nav-toggle - header & nav
COMPONENTS: .btn / .btn-primary / .btn-dark / .btn-ghost / .btn-block / .btn-sm - button variants with fill-sweep
COMPONENTS: .hero / .hero-grid / .hero-art - home hero with sliding SVG layers
COMPONENTS: .story / .story-sticky / .story-scroll / .story-block - sticky narrative column layout
COMPONENTS: .meander / .divider-wave - decorative section dividers
COMPONENTS: .strip-head / .product-strip / .product-card - scroll-snap product strip and card
COMPONENTS: .engrave-tool / .engrave-preview / .engrave-controls / .style-switch - signature engraving preview widget
COMPONENTS: .form-grid / .field / .field-error / .hp-field / .form-msg - form building blocks
COMPONENTS: .site-footer / .footer-inner / .footer-links / .footer-col / .newsletter-form - footer
COMPONENTS: .cookie-banner / .cookie-actions - cookie consent banner
COMPONENTS: .page-hero - inner page hero band
COMPONENTS: .breadcrumbs - breadcrumb trail
COMPONENTS: .prose - readable-measure long-form legal text
COMPONENTS: .legal-toc - table of contents box for legal pages
COMPONENTS: .notice / .notice-info / .notice-warn / .notice-success - callout boxes
COMPONENTS: .faq / .faq-item - FAQ accordion (details/summary)
COMPONENTS: .product-detail / .gallery - single product page layout
COMPONENTS: .cart-table / .cart-summary - cart & checkout tables
COMPONENTS: .contact-layout / .contact-info - contact page layout
COMPONENTS: .badge-seal - decorative badge SVG sizing */

/* wg-contrast-autofix */
div.hero-copy.reveal div.hero-actions a.btn.btn-ghost span { color: #ffffff !important; }
footer.site-footer div.footer-inner div.footer-brand span.logo-word { color: #ffffff !important; }
#cookie-decline { color: #ffffff !important; }