/* Mobile first: touch and readable content are the baseline. */
:root { --paper:#fbfaf7; --ink:#171613; --muted:#605d55; --mint:#e1eee6; --green:#2b4b3b; --line:#d9d7ce; --serif:Georgia,'Times New Roman',serif; color:var(--ink); background:var(--paper); font-family:Arial,Helvetica,sans-serif; font-synthesis:none; }
* { box-sizing:border-box; }
body,h1,h2,h3,p,figure { margin:0; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-underline-offset:5px; }
a,summary { -webkit-tap-highlight-color:#c0d9c9; touch-action:manipulation; }
a:focus-visible,summary:focus-visible { outline:3px solid var(--green); outline-offset:4px; }
::selection { background:#c0d9c9; }
[id] { scroll-margin-top:24px; }
.wrap { width:calc(100% - 40px); max-width:1280px; margin-inline:auto; }
h1,h2,h3 { font-family:var(--serif); font-weight:400; }
p { line-height:1.65; }
em { font-weight:400; }
.eyebrow { font-size:11px; line-height:1.6; letter-spacing:.13em; text-transform:uppercase; }
.preview-note { background:var(--mint); text-align:center; padding:8px 16px; font-size:10px; line-height:1.5; }
.skip-link { position:absolute; top:-100px; left:20px; z-index:5; padding:15px; background:var(--ink); color:white; }
.skip-link:focus { top:10px; }
.site-header { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:inline-flex; width:134px; min-height:48px; align-items:center; flex-shrink:0; }
.brand img { width:100%; }
.header-descriptor { display:none; }
.site-header nav { display:flex; gap:16px; }
.site-header nav a { display:inline-flex; align-items:center; min-height:48px; text-decoration:none; font-size:12px; }
.site-header nav a[aria-current="page"] { border-bottom:1px solid var(--ink); }
.hero { border-block:1px solid var(--line); }
.hero-copy { padding:28px 0; }
.dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#6c947d; margin-right:9px; }
.hero h1 { font-size:clamp(46px,11vw,65px); line-height:1.05; letter-spacing:-.055em; margin:20px 0 18px; }
.hero h1 br,.desktop-break { display:none; }
.hero-intro { font-size:16px; color:var(--muted); }
.text-link { display:inline-flex; align-items:center; justify-content:space-between; gap:40px; min-height:48px; padding:13px 0; border-bottom:1px solid var(--ink); text-decoration:none; font-size:14px; }
.hero .text-link { margin-top:14px; }
.hero-foot { display:none; }
.hero-image { position:relative; aspect-ratio:1.08; background:#fff; overflow:hidden; }
.hero-image>img { width:100%; height:100%; object-fit:contain; }
.hero-image figcaption { position:absolute; bottom:18px; left:18px; right:18px; display:flex; justify-content:space-between; align-items:flex-end; color:var(--ink); font-family:var(--serif); font-size:22px; line-height:1.2; background:rgba(255,255,255,.94); padding:10px 12px; }
.hero-image small { font-family:Arial,sans-serif; font-size:11px; }
.image-number { font-family:Arial,sans-serif; font-size:11px; }
.collection { padding-block:48px; }
.section-heading h2,.symbol-heading h2 { font-size:38px; line-height:1.13; letter-spacing:-.035em; margin-top:14px; }
.section-intro { margin-top:20px; font-size:16px; color:var(--muted); }
.category-links { display:flex; flex-wrap:wrap; gap:8px; margin:26px 0; }
.category-links a { display:flex; align-items:center; justify-content:space-between; gap:14px; flex:1 1 140px; min-height:48px; padding:12px 14px; border:1px solid var(--line); text-decoration:none; font-size:13px; }
.category-links a span { font-size:10px; color:var(--muted); }
.product-grid { display:grid; gap:32px; }
.product-photo { position:relative; aspect-ratio:1.15; overflow:hidden; background:#fff; }
.product-photo img { width:100%; height:100%; object-fit:contain; }
.photo-index { position:absolute; top:14px; left:14px; background:var(--paper); padding:8px; font-size:10px; }
.piece-title { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:18px 0 6px; }
.piece h3 { font-size:30px; letter-spacing:-.02em; }
.small-symbol { width:34px; height:34px; object-fit:contain; }
.piece>p { font-size:16px; color:var(--muted); }
.piece-link { display:inline-flex; align-items:center; min-height:48px; font-size:13px; gap:20px; }
.history { padding-block:45px; background:var(--mint); }
.history-grid { display:grid; gap:28px; }
.history h2 { font-size:40px; line-height:1.13; letter-spacing:-.035em; margin-top:18px; }
.history-lead { font-family:var(--serif); font-size:27px; line-height:1.3; margin-bottom:22px; }
.history-copy>p:not(.history-lead) { font-size:16px; margin-top:14px; color:#35443a; }
.story-hero { padding-block:52px; border-block:1px solid var(--line); }
.story-hero h1 { font-size:clamp(50px,12vw,76px); line-height:1.02; letter-spacing:-.055em; margin:20px 0 24px; }
.story-hero-copy { display:grid; gap:16px; }
.story-hero-copy>p { color:var(--muted); font-size:17px; max-width:520px; }
.symbol-section { padding-block:48px 36px; }
.symbol-heading { margin-bottom:25px; }
.interaction-hint { font-size:14px; margin-top:22px; }
.interaction-hint span { font-size:12px; color:var(--muted); }
.symbol-list { display:grid; gap:12px; }
.symbol-story { border:1px solid var(--line); background:var(--paper); }
.symbol-story summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:18px; padding:18px 16px; min-height:100px; }
.symbol-story summary::-webkit-details-marker { display:none; }
.symbol-story summary>img { width:54px; height:54px; flex-shrink:0; object-fit:contain; transition:transform .2s ease; }
.symbol-label { display:block; min-width:0; flex:1; }
.symbol-name { display:block; font-family:var(--serif); font-size:25px; line-height:1.25; }
.symbol-keyword { display:block; color:var(--muted); font-size:13px; line-height:1.45; margin-top:7px; }
.toggle-icon { position:relative; width:18px; height:18px; flex-shrink:0; }
.toggle-icon::before,.toggle-icon::after { content:''; position:absolute; background:var(--green); width:14px; height:1px; top:8px; left:2px; }
.toggle-icon::after { transform:rotate(90deg); }
.symbol-story[open] .toggle-icon::after { transform:none; }
.symbol-story[open] summary { background:var(--mint); }
.symbol-story:target { outline:3px solid #6c947d; outline-offset:3px; }
.symbol-content { padding:22px 20px 25px; }
.symbol-content h3 { font-family:Arial,sans-serif; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--green); margin-bottom:9px; }
.symbol-content p { font-size:16px; }
.symbol-content h3:not(:first-child) { margin-top:22px; }
.celebration-wish { font-family:var(--serif); font-size:20px!important; line-height:1.5; }
.closing { padding-block:48px 60px; text-align:center; border-top:1px solid var(--line); }
.closing h2 { font-size:44px; line-height:1.12; letter-spacing:-.04em; margin:20px 0; }
.brand-story { padding-block:58px; background:#f0ece2; }
.brand-story-grid { display:grid; gap:40px; }
.brand-word { font-family:var(--serif); font-size:clamp(60px,18vw,86px); line-height:.95; letter-spacing:-.06em; }
.brand-origin { margin:18px 0 0 5px; font-family:var(--serif); font-size:18px; font-style:italic; }
.brand-story-copy h2 { margin:16px 0 20px; font-size:clamp(38px,10vw,52px); line-height:1.08; letter-spacing:-.04em; }
.brand-story-copy>p:not(.eyebrow) { max-width:620px; color:#3e3a34; font-size:16px; }
.brand-story-copy .text-link { margin-top:20px; }
.visit { padding-block:52px; background:var(--ink); color:var(--paper); }
.visit-grid { display:grid; gap:34px; }
.visit-copy h2 { font-size:48px; line-height:1.05; letter-spacing:-.04em; margin:16px 0; }
.visit-intro { max-width:510px; color:#d8d5cd; font-family:var(--serif); font-size:23px; line-height:1.35; }
.visit address { margin-top:30px; font-style:normal; font-size:16px; line-height:1.65; }
.hours { margin:24px 0 0; }
.hours div { display:flex; justify-content:space-between; gap:20px; padding:14px 0; border-top:1px solid #47443e; }
.hours dt,.hours dd { margin:0; font-size:14px; }
.hours dd { color:#d8d5cd; }
.visit-links { display:grid; margin-top:12px; }
.visit-links a,.main-site-link { display:flex; min-height:50px; align-items:center; justify-content:space-between; gap:24px; border-top:1px solid #47443e; color:var(--paper); text-decoration:none; font-size:14px; }
.main-site-link { margin-top:28px; color:#b9d1c3; border-color:#6c947d; }
.visit-image { aspect-ratio:4/5; overflow:hidden; background:#080a0b; }
.visit-image img { width:100%; height:100%; object-fit:cover; object-position:center; opacity:.82; filter:saturate(.78); }
.contact-strip { padding-block:48px; background:var(--mint); }
.contact-strip-grid { display:grid; gap:28px; }
.contact-strip h2 { font-size:40px; line-height:1.1; letter-spacing:-.035em; margin-top:14px; }
.contact-details address { font-style:normal; font-size:16px; line-height:1.65; }
.contact-details>p { margin-top:12px; color:#35443a; font-size:14px; }
.contact-links { display:grid; margin-top:24px; }
.contact-links a { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:50px; border-top:1px solid #b9cec1; color:var(--ink); text-decoration:none; font-size:14px; }
.site-footer { padding-block:20px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 18px; }
.site-footer .brand { width:122px; }
.site-footer>span { width:100%; order:3; font-size:10px; letter-spacing:.06em; text-transform:uppercase; }
.site-footer>a:last-child { display:inline-flex; align-items:center; min-height:48px; font-size:13px; }
@media(min-width:700px) {
  .wrap { width:90%; }
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 26px; }
  .section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:35px; }
  .section-intro { max-width:320px; margin:0; }
  .section-heading h2,.symbol-heading h2 { font-size:46px; }
  .hero h1 { font-size:70px; }
  .hero-image { aspect-ratio:1.5; }
  .category-links a { flex:1 1 120px; }
  .symbol-list { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
  .site-footer>span { order:0; width:auto; }
}
@media(min-width:900px) {
  .site-header { min-height:100px; gap:26px; }
  .brand { width:166px; }
  .header-descriptor { display:block; margin-right:auto; border-left:1px solid var(--line); padding-left:26px; font-size:10px; text-transform:uppercase; letter-spacing:.16em; }
  .site-header nav { gap:30px; }
  .hero { display:grid; grid-template-columns:46% 54%; min-height:620px; }
  .hero-copy { padding:55px 24px 24px 0; display:flex; flex-direction:column; align-items:flex-start; }
  .hero h1 { font-size:clamp(66px,6.6vw,94px); margin:32px 0 25px; }
  .hero h1 br,.desktop-break { display:initial; }
  .hero-foot { display:flex; width:100%; justify-content:space-between; gap:15px; margin-top:auto; padding-top:30px; font-size:9px; text-transform:uppercase; letter-spacing:.07em; }
  .hero-image { min-height:620px; aspect-ratio:auto; }
  .hero-image>img { position:absolute; inset:0; }
  .hero-image figcaption { left:28px; right:28px; bottom:28px; font-size:25px; }
  .collection { padding-block:80px; }
  .history { padding-block:75px; }
  .history-grid { grid-template-columns:1.1fr 1fr; gap:55px; }
  .history h2 { font-size:52px; }
  .story-hero { padding-block:85px; display:grid; grid-template-columns:1.15fr .85fr; align-items:end; gap:60px; }
  .story-hero h1 { grid-column:1; font-size:clamp(76px,8vw,108px); margin-bottom:0; }
  .story-hero-copy { grid-column:2; align-self:end; }
  .symbol-section { padding-block:75px 60px; }
  .symbol-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:35px; }
  .closing { padding-block:80px; }
  .closing h2 { font-size:64px; }
  .brand-story { padding-block:90px; }
  .brand-story-grid { grid-template-columns:.9fr 1.1fr; align-items:center; gap:90px; }
  .brand-word { font-size:clamp(88px,8.5vw,122px); }
  .brand-origin { font-size:21px; }
  .brand-story-copy h2 { font-size:58px; }
  .visit { padding-block:80px; }
  .visit-grid { grid-template-columns:.9fr 1.1fr; align-items:center; gap:80px; }
  .visit-copy h2 { font-size:68px; }
  .visit-image { aspect-ratio:4/3; max-height:620px; }
  .visit-image img { object-position:center 48%; }
  .contact-strip { padding-block:70px; }
  .contact-strip-grid { grid-template-columns:1fr 1fr; align-items:start; gap:80px; }
  .contact-strip h2 { font-size:54px; }
}
@media(min-width:1100px) {
  .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .symbol-list { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
  .symbol-story { border-right:0; }
  .symbol-story:last-child { grid-column:auto; }
  .symbol-story summary { flex-direction:column; text-align:center; min-height:245px; gap:20px; padding:25px 12px 18px; }
  .symbol-story summary>img { width:64px; height:64px; }
  .symbol-name { font-size:25px; }
  .symbol-keyword { min-height:38px; }
  .symbol-content { padding:22px 18px; }
  .symbol-content p { font-size:14px; }
}
@media(hover:hover) and (pointer:fine) {
  .category-links a:hover,.text-link:hover { background:var(--mint); }
  .symbol-story summary:hover { background:var(--mint); }
  .symbol-story summary:hover>img { transform:translateY(-4px) scale(1.08); }
  .piece-link:hover,.site-header nav a:hover { color:var(--green); }
}
@media(max-width:359px) {
  .wrap { width:calc(100% - 32px); }
  .brand { width:118px; }
  .site-header nav { gap:10px; }
  .site-header nav a { font-size:10px; }
  .symbol-story summary { gap:12px; padding-inline:12px; }
  .symbol-story summary>img { width:44px; height:44px; }
  .symbol-name { font-size:23px; }
  .history h2 { font-size:36px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; }
  .symbol-story summary:hover>img { transform:none; }
}

.category-heading { margin:30px 0 26px; }
.category-heading h2,.category-heading h3 { font-size:36px; line-height:1.2; margin:12px 0; }
.category-heading>p:last-child { max-width:600px; color:var(--muted); font-size:16px; }
.category-preview { padding-bottom:48px; }
.category-preview-grid { display:grid; gap:36px; }
.category-card h3 { font-size:30px; margin:12px 0 8px; }
.category-card>p { color:var(--muted); font-size:16px; }
.product-type { margin-top:16px; color:var(--green)!important; font-size:11px!important; letter-spacing:.08em; text-transform:uppercase; }
.collection-category { margin-top:50px; padding-top:38px; border-top:1px solid var(--line); }
@media(min-width:900px) { .category-preview-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; } .category-preview { padding-bottom:80px; } }

.product-category-section { scroll-margin-top:24px; }
.category-subheading { margin-bottom:20px; }
.category-subheading h2 { margin:5px 0 0; font-family:var(--serif); font-size:clamp(32px,5vw,54px); font-weight:400; }

/* Browsing in place */
.collection { padding-bottom:12px; }
.collection-shell { padding-bottom:28px; }
.collection-products { padding-bottom:20px; }
.category-preview { padding-top:12px; }
.category-links { position:sticky; top:0; z-index:10; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; margin:0 auto 24px; padding-block:10px; background:var(--paper); border-bottom:1px solid var(--line); }
.category-links a { min-width:0; justify-content:center; min-height:48px; padding:10px 4px; font-size:12px; gap:0; }
.category-links a span { display:none; }
.category-links a[aria-current="location"] { background:var(--green); color:white; border-color:var(--green); }
[id],.product-category-section { scroll-margin-top:92px; }
.category-card h3,.piece h3 { font-size:clamp(26px,5.5vw,30px); overflow-wrap:anywhere; }
.related-products { padding:0 20px 24px; }
.related-products h3 { font-family:Arial,sans-serif; font-size:11px; letter-spacing:.08em; text-transform:uppercase; margin:0 0 10px; }
.related-products a { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; padding-block:8px; font-size:14px; border-top:1px solid var(--line); }
button { font:inherit; color:inherit; cursor:pointer; touch-action:manipulation; }
button:focus-visible { outline:3px solid var(--green); outline-offset:3px; }
.photo-open { width:100%; height:100%; border:0; padding:0; display:block; background:white; position:relative; }
.photo-hint { position:absolute; bottom:10px; right:10px; font-size:11px; padding:8px 10px; background:rgba(251,250,247,.96); border:1px solid var(--line); }
.photo-index { pointer-events:none; }
body.panel-open { position:fixed; width:100%; overflow:hidden; }
.detail-panel { border:0; color:var(--ink); background:var(--paper); padding:0; width:100%; max-width:100%; max-height:88vh; max-height:88dvh; margin:auto 0 0; border-radius:20px 20px 0 0; box-shadow:0 -8px 40px #0002; }
.detail-panel[open] { display:flex; flex-direction:column; }
.detail-panel::backdrop { background:rgba(23,22,19,.48); }
.panel-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 20px; border-bottom:1px solid var(--line); flex-shrink:0; }
.panel-bar .eyebrow { font-size:9px; }
.panel-close { background:none; border:0; min-height:48px; min-width:64px; font-size:14px; }
.panel-body { padding:24px 24px 8px; overflow-y:auto; overscroll-behavior:contain; }
.meaning-heading { display:flex; align-items:center; gap:20px; }
.meaning-heading img { width:64px; height:64px; object-fit:contain; flex-shrink:0; }
.meaning-heading h2,.photo-panel h2 { font-size:32px; line-height:1.15; }
.panel-body .symbol-content { padding:24px 0 16px; }
.panel-footer { padding:12px 24px max(20px,env(safe-area-inset-bottom)); flex-shrink:0; }
.continue-button { background:var(--green); color:white; border:0; width:100%; min-height:50px; padding:12px 20px; font-size:14px; }
.photo-panel .panel-body { text-align:center; }
.photo-panel .panel-body>img { width:100%; max-height:58vh; object-fit:contain; background:white; margin-top:18px; }
@media(min-width:700px) {
 .detail-panel { width:min(600px,90vw); max-width:90vw; margin:auto; border-radius:12px; }
 .photo-panel { width:min(820px,90vw); }
 .category-links { gap:8px; }
 .category-links a { font-size:14px; }
}

.meaning-picker { display:grid; margin-top:20px; }
.meaning-picker button { min-height:48px; border:0; border-top:1px solid var(--line); background:none; text-align:left; padding:12px 0; }

/* A fixed product stage avoids movement as the featured piece changes. */
.hero-rotator { display:flex; flex-direction:column; aspect-ratio:auto; overflow:hidden; }
.hero-visual { position:relative; aspect-ratio:1.12; width:100%; background:white; overflow:hidden; touch-action:pan-y; -webkit-user-select:none; user-select:none; }
.hero-visual img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity .5s ease; }
.hero-visual img:first-child,.hero-visual img.is-current { opacity:1; }
.hero-visual img.is-hidden { opacity:0; }
.hero-rotator figcaption { position:static; display:block; padding:16px 24px 8px; background:white; min-height:140px; margin:0; font-size:clamp(23px,5vw,28px); }
.hero-product-type { display:block; font-family:Arial,sans-serif; font-size:10px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:8px; color:var(--green); }
.hero-product-name { display:block; color:inherit; text-decoration:none; }
.hero-product-name:hover { text-decoration:underline; text-underline-offset:5px; }
.hero-product-meaning { display:block; margin-top:7px; line-height:1.45; }
.hero-controls { display:flex; align-items:center; gap:5px; padding:0 16px 12px; background:white; }
.hero-controls[hidden] { display:none; }
.hero-controls button { min-height:44px; min-width:44px; border:0; background:none; font-size:18px; }
.hero-controls button:hover { background:var(--mint); }
.hero-count { font-size:11px; min-width:54px; text-align:center; }
.hero-controls .hero-play { margin-left:auto; display:grid; place-items:center; padding:12px; color:inherit; cursor:pointer; }
.visually-hidden { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
@media(max-width:699px) {
 .hero-copy { padding:22px 0 20px; }
 .hero h1 { margin:15px 0 13px; }
 .hero .text-link { margin-top:9px; }
 .hero-visual { aspect-ratio:auto; height:clamp(220px,58vw,250px); }
 .hero-rotator figcaption { min-height:92px; padding:12px 16px 7px; font-size:24px; }
 .hero-rotator figcaption::after { content:'Swipe to explore'; display:block; margin-top:8px; color:var(--muted); font-family:Arial,sans-serif; font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
 .hero-product-type { margin-bottom:4px; }
 .hero-product-meaning { margin-top:3px; }
 .hero-controls { padding:0 8px max(8px,env(safe-area-inset-bottom)); }
}
@media(min-width:900px) { .hero-visual { aspect-ratio:auto; flex:1; min-height:420px; } .hero-rotator figcaption { min-height:140px; padding-inline:28px; } .hero-controls { padding-inline:20px; } }
@media(prefers-reduced-motion:reduce) { .hero-visual img { transition:none; } }