/* Gold Shop Sites · public site layer (catalog, item, scheme, rates, visit, legal, member pages).
   Sits on base.css. Header, footer, cookie line and phone action bar are the landing page's, so moving
   from the story into any inner page feels like one site. Page-specific layout lives in each page. */

/* ---------- header: one hairline bar across the full width ---------- */
.top { position: sticky; top: 0; z-index: 40; height: var(--head); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px;
  padding: 0 var(--pad); background: var(--ground-glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); view-transition-name: top; }
.mark { display: flex; align-items: baseline; gap: 10px; text-decoration: none; white-space: nowrap; }
.mark b { font-weight: 600; font-size: 1.32rem; letter-spacing: 0.02em; font-variation-settings: "wdth" 125; color: var(--accent); }
.mark span { font-size: 0.86rem; color: var(--ink-dim); font-variation-settings: "wdth" 110; }
.nav { display: flex; gap: clamp(14px, 2vw, 34px); justify-content: center; }
.nav a { text-decoration: none; font-size: 0.94rem; color: var(--ink-dim); padding: 10px 0; position: relative; transition: color 300ms var(--ease); }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease); }
.nav a:hover, .nav a[aria-current] { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
.top-end { display: flex; align-items: center; gap: 22px; }
.top-rate { font-size: 0.9rem; color: var(--ink-dim); white-space: nowrap; font-variant-numeric: tabular-nums; text-decoration: none; }
.top-rate b { color: var(--ink); font-weight: 500; }
.top .btn { min-height: 42px; padding: 0 16px; gap: 12px; font-size: 0.94rem; }
.menu-btn { display: none; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; position: relative; }
.menu-btn i { position: absolute; left: 12px; right: 12px; height: 1px; background: var(--ink); transition: transform 450ms var(--ease); }
.menu-btn i:first-child { top: 18px; } .menu-btn i:last-child { top: 25px; }
.menu-btn[aria-expanded="true"] i:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
/* phone menu: full-screen, links rise one after another */
.menu { position: fixed; inset: var(--head) 0 0 0; z-index: 39; background: var(--ground); padding: 24px var(--pad) 120px; display: grid; align-content: start; visibility: hidden; opacity: 0; transition: opacity 400ms var(--ease), visibility 0s 400ms; }
.menu.open { visibility: visible; opacity: 1; transition: opacity 400ms var(--ease); }
.menu a { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-size: 2rem; font-weight: 300; font-variation-settings: "wdth" 118; transform: translateY(24px); opacity: 0; transition: transform 600ms var(--ease), opacity 600ms var(--ease); transition-delay: calc(var(--i) * 50ms); }
.menu a small { font-size: 0.86rem; color: var(--ink-dim); font-variation-settings: "wdth" 100; }
.menu.open a { transform: none; opacity: 1; }

/* ---------- page head: words left, the gold piece and its dust right ---------- */
.phead { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); min-height: clamp(460px, 64vh, 720px); border-bottom: 1px solid var(--line); overflow: hidden; }
.phead-copy { position: relative; z-index: 2; padding: clamp(48px, 7vw, 120px) var(--pad) clamp(40px, 5vw, 72px); display: flex; flex-direction: column; justify-content: flex-end; }
.phead-art { position: relative; min-height: 320px; }
.phead-art .piece { position: absolute; inset: 6% 8% 6% 0; z-index: 1; }
.phead-art .piece img { animation: float 9s var(--ease) infinite alternate; }
@keyframes float { from { transform: translate3d(0, -6px, 0) rotate(-1.2deg); } to { transform: translate3d(0, 8px, 0) rotate(1.2deg); } }
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; font-size: 0.84rem; color: var(--ink-dim); }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--ink-faint); }
.crumbs a { text-decoration: none; } .crumbs a:hover { color: var(--accent); }
.phead .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }

/* ---------- bands: full-bleed sections divided by hairlines ---------- */
.band { padding: clamp(56px, 7vw, 120px) var(--pad); border-bottom: 1px solid var(--line); position: relative; }
.band-tight { padding-top: clamp(36px, 4vw, 64px); padding-bottom: clamp(36px, 4vw, 64px); }
.band-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.band-head .lede { margin: 0; justify-self: end; }
.flood { background: var(--field); color: var(--on-field); --ink: var(--on-field); --ink-dim: var(--on-field-dim); --line: rgba(12, 9, 7, 0.22); --line-2: rgba(12, 9, 7, 0.12); --line-ink: rgba(12, 9, 7, 0.45); --accent: var(--on-field); }
html[data-theme="ivory"] .flood { --line: rgba(241, 233, 218, 0.22); --line-2: rgba(241, 233, 218, 0.12); --line-ink: rgba(241, 233, 218, 0.45); --accent: #f4d58d; }
.flood .btn { background: var(--on-field); color: var(--gold-hi); }
html[data-theme="ivory"] .flood .btn { background: var(--gold); color: #1b130b; }
.flood .btn-line { background: transparent; color: var(--on-field); box-shadow: inset 0 0 0 1px var(--line-ink); }
/* columns split by hairlines, edge to edge */
.ruled { display: grid; grid-template-columns: repeat(var(--c, 3), minmax(0, 1fr)); border-top: 1px solid var(--line); }
.ruled > * { padding: 28px var(--pad) 32px 0; border-right: 1px solid var(--line); }
.ruled > * + * { padding-left: var(--pad); }
.ruled > *:last-child { border-right: 0; padding-right: 0; }
.cta-halves { display: grid; grid-template-columns: 1fr 1fr; }
.cta-halves a { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: clamp(200px, 26vw, 340px); padding: clamp(28px, 3vw, 48px) var(--pad); text-decoration: none; transition: background-color 500ms var(--ease); }
.cta-halves .c { background: var(--gold); color: #0c0907; }
.cta-halves .c:hover { background: var(--gold-hi); }
.cta-halves .j { background: var(--ink); color: var(--ground); }
.cta-halves .j:hover { background: var(--accent); }
.cta-halves b { font-weight: 300; font-size: clamp(2rem, 4.6vw, 5.2rem); line-height: 0.95; letter-spacing: -0.03em; font-variation-settings: "wdth" 120; }
.cta-halves a > span { display: flex; justify-content: space-between; align-items: center; font-size: 1rem; }
.cta-halves svg { width: 44px; height: 44px; transition: transform 500ms var(--ease); }
.cta-halves a:hover svg { transform: translate(6px, -6px); }
.note { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; box-shadow: inset 2px 0 0 var(--gold); background: var(--ground-2); font-size: 0.9rem; color: var(--ink-dim); }
.note svg { width: 20px; height: 20px; flex: none; color: var(--accent); margin-top: 2px; }
.note b { color: var(--ink); font-weight: 500; }

/* ---------- footer (landing's) ---------- */
.foot { padding: 72px var(--pad) 0; border-top: 1px solid var(--line); }
.foot .cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; font-size: 0.94rem; }
.foot h2 { font-size: 0.9rem; font-weight: 500; color: var(--accent); margin: 0 0 14px; }
.foot p, .foot ul { margin: 0; color: var(--ink-dim); }
.foot ul { list-style: none; padding: 0; display: grid; gap: 4px; }
.foot a { text-decoration: none; display: inline-block; padding: 4px 0; }
.foot a:hover { color: var(--accent); }
.foot .t { color: var(--ink); font-variant-numeric: tabular-nums; }
.foot li { display: flex; justify-content: space-between; gap: 16px; max-width: 240px; }
.legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 56px; padding: 18px 0 22px; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--ink-dim); }
.legal nav { display: flex; gap: 22px; flex-wrap: wrap; }
.legal a { text-decoration: none; } .legal a:hover { color: var(--accent); }
.cookie { position: fixed; z-index: 45; right: var(--pad); bottom: 18px; max-width: 460px; display: flex; gap: 16px; align-items: center; padding: 10px 10px 10px 16px; font-size: 0.82rem; color: var(--ink-dim); background: var(--ground-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line); }
.cookie button { font: 500 0.84rem var(--font); background: var(--ink); color: var(--ground); border: 0; min-height: 40px; padding: 0 14px; cursor: pointer; }
.bar { display: none; }

/* ---------- phones and small tablets ---------- */
@media (max-width: 1100px) { .top-rate { display: none; } }
@media (max-width: 900px) {
  :root { --head: 58px; }
  .nav { display: none; }
  .menu-btn { display: block; }
  .top { grid-template-columns: 1fr auto; }
  .top .btn { display: none; }
  .phead { grid-template-columns: 1fr; min-height: 0; }
  .phead-art { order: -1; min-height: 0; height: 38svh; }
  .phead-art .piece { inset: 4% 12%; }
  .phead-copy { padding-top: 8px; }
  .band-head { grid-template-columns: 1fr; }
  .band-head .lede { justify-self: start; }
  .ruled { grid-template-columns: 1fr; }
  .ruled > *, .ruled > * + * { padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .cta-halves { grid-template-columns: 1fr; }
  .foot { padding-bottom: 70px; }
  .foot .cols { grid-template-columns: 1fr 1fr; gap: 32px; }
  .cookie { left: var(--pad); right: var(--pad); bottom: 74px; max-width: none; }
  .bar { display: grid; grid-template-columns: 1fr 1.4fr; position: fixed; z-index: 42; left: 0; right: 0; bottom: 0; padding-bottom: env(safe-area-inset-bottom); background: var(--ground); border-top: 1px solid var(--line); }
  .bar a { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; text-decoration: none; font-weight: 500; font-size: 0.98rem; }
  .bar a svg { width: 20px; height: 20px; }
  .bar .c { background: var(--gold); color: #0c0907; }
  .bar .j { background: var(--ink); color: var(--ground); }
}
@media (max-width: 520px) { .foot .cols { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .phead-art .piece img { animation: none; } }