/* Sid's Antiques & Gifts — the page is his shop front.
   One bold thing: the door, lettered in gold leaf on blue glass. Everything
   below it is quiet. */

@font-face { font-family: "DM Serif Display"; src: url(/assets/dm-serif-display.woff2) format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Serif Display"; src: url(/assets/dm-serif-display-italic.woff2) format("woff2");
  font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Serif Text"; src: url(/assets/dm-serif-text.woff2) format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Serif Text"; src: url(/assets/dm-serif-text-italic.woff2) format("woff2");
  font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Karla"; src: url(/assets/karla.woff2) format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --glass: #10203a;
  --glass-hi: #24426b;
  --glass-lo: #0a1528;
  --wood: #3a2119;
  --wood-hi: #573323;
  --wood-lo: #24130d;
  --gold: #d4af5a;
  --gold-hi: #f6e7b0;
  --gold-lo: #9c7a2e;
  --gold-text: #7d5d1c;
  --velvet: #2c1a30;
  --velvet-lo: #1d1020;
  --paper: #fcfbf8;
  --stone: #d9d6cf;
  --ink: #1e1a17;
  --ink-soft: #5b544d;
  --rule: #e4e0d8;
  --display: "DM Serif Display", Georgia, serif;
  --display-text: "DM Serif Text", Georgia, serif;
  --body: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  --maxw: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
  font-optical-sizing: auto;
}
img, svg, iframe { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; font-synthesis: none; line-height: 1.1; margin: 0; }

/* ── buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px;
  font: 600 1rem/1 var(--body); text-decoration: none;
  border: 1.5px solid transparent; border-radius: 2px;
  transition: background-color .15s, color .15s;
}
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--wood); }
.btn-line { border-color: var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--paper); }
.btn-gold { border-color: var(--gold); color: var(--gold-hi); }
.btn-gold:hover { background: var(--gold); color: var(--glass-lo); }

/* ── gold leaf ───────────────────────────────────────────── */
.gilt { color: var(--gold); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gilt {
    background: linear-gradient(180deg, #fff3cc 0%, #f0d48e 34%, #d1a752 62%, #f2d995 82%, #c99a45 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    /* the sign painter's shade: a hard offset, then a soft edge */
    filter: drop-shadow(1.5px 1.5px 0 #050c18);
  }
}

/* ── the shop front ──────────────────────────────────────── */
.front { background: var(--wood); padding-top: 0; }
.cornice {
  height: 34px;
  background:
    linear-gradient(180deg, var(--wood-hi) 0 6px, var(--wood-lo) 6px 9px, var(--wood) 9px 24px, var(--wood-lo) 24px 26px, var(--wood-hi) 26px 30px, var(--wood-lo) 30px);
}
.facade {
  max-width: var(--maxw); margin: 0 auto;
  padding: 28px 20px 0;
  display: grid; gap: 28px;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  align-items: stretch;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 2px, transparent 2px 9px);
}

.glass {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 70% at 20% 0%, rgba(80, 120, 170, .28), transparent 60%),
    linear-gradient(165deg, var(--glass-hi) 0%, var(--glass) 42%, var(--glass-lo) 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), inset 0 0 40px rgba(0,0,0,.45);
}
/* one pass of light across the glass when the page opens */
.glass::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(112deg, transparent 0 38%, rgba(255,255,255,.10) 44%, rgba(255,255,255,.03) 48%, transparent 54%);
  background-size: 300% 100%;
  background-position: 100% 0;
  animation: glint 2.4s .5s cubic-bezier(.3,.1,.2,1) both;
}
@keyframes glint { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* the door */
.door { display: flex; flex-direction: column; }
.leaf { flex: 1; display: flex; flex-direction: column; }
.panel { flex: 1 0 auto; }
.door {
  background: var(--wood-lo);
  padding: 10px;
  box-shadow: inset 0 0 0 2px var(--wood-hi), 0 0 0 6px var(--wood-lo);
}
.transom { height: 72px; display: grid; place-items: center; margin-bottom: 10px; }
.num { font: italic 400 2.6rem/1 var(--display); letter-spacing: .04em; }
.leaf {
  position: relative;
  background: var(--wood);
  padding: 22px 22px 0;
  box-shadow: inset 0 0 0 1px var(--wood-hi), inset 0 0 0 7px var(--wood), inset 0 0 0 8px var(--wood-lo);
}
.pane {
  padding: 40px 22px 34px;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), inset 0 0 40px rgba(0,0,0,.45), 0 0 0 4px var(--wood-lo);
}
.lettering { font-weight: 400; font-synthesis: none; }
.l-name {
  display: block;
  font: italic 400 clamp(4.4rem, 17vw, 6.6rem)/.95 var(--display);
  letter-spacing: -.01em;
  padding: 0 .08em .06em;
}
.apos { margin: 0 -.06em 0 -.14em; }
.l-trade {
  display: block; margin-top: 6px;
  font: 400 clamp(1.35rem, 5.4vw, 1.75rem)/1.15 var(--display-text);
  letter-spacing: .03em;
}
.flourish { display: block; width: 200px; height: 14px; margin: 18px auto 14px; }
.l-jewel { margin: 0; font: italic 400 1.3rem/1.2 var(--display-text); }
.l-hours { margin: 26px 0 0; font: 400 1rem/1.5 var(--display-text); letter-spacing: .02em; }

/* the hanging sign — flipped by the script to the shop's real hours */
.sign {
  position: relative;
  display: inline-flex; flex-direction: column; align-items: center;
  margin: 46px auto 0; padding: 12px 26px 13px;
  min-width: 190px;
  background: #f3ece0;
  color: var(--ink);
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 6px 14px rgba(0,0,0,.45);
  transform: rotate(-2deg);
  transform-origin: 50% -34px;
  animation: settle 1.8s 1s ease-out both;
}
.sign::before, .sign::after {
  content: ""; position: absolute; top: -30px; width: 1.5px; height: 34px;
  background: #c9b48a;
}
.sign::before { left: 30%; transform: rotate(24deg); transform-origin: bottom; }
.sign::after { right: 30%; transform: rotate(-24deg); transform-origin: bottom; }
.sign-word { font: italic 400 2.1rem/1 var(--display); }
.sign-sub { margin-top: 4px; font: 600 .875rem/1.2 var(--body); color: var(--ink-soft); }
.sign.is-closed .sign-word { font-style: normal; }
@keyframes settle {
  0% { transform: rotate(-7deg); }
  35% { transform: rotate(3deg); }
  65% { transform: rotate(-3.5deg); }
  100% { transform: rotate(-2deg); }
}

.panel {
  height: 112px; padding: 22px 0 0;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.panel::before {
  content: ""; flex: 1; margin: 0 6px 12px;
  box-shadow: inset 0 0 0 1px var(--wood-lo), inset 0 0 0 6px var(--wood), inset 0 0 0 7px var(--wood-hi);
}
.kick {
  height: 30px;
  background: linear-gradient(180deg, #c9ad6c, #96733a 50%, #6f5222);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.25);
  margin: 0 -22px;
}
.knob {
  position: absolute; right: 7px; top: 58%;
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3cf, #c9a24f 45%, #6e4f17);
  box-shadow: 0 2px 3px rgba(0,0,0,.5);
}

/* the display window */
.window { display: flex; flex-direction: column; }
.window-glass {
  padding: 40px 32px;
  margin: 12px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), inset 0 0 50px rgba(0,0,0,.5), 0 0 0 10px var(--wood-lo), 0 0 0 12px var(--wood-hi);
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.window-title {
  font: italic 400 clamp(2.4rem, 5.6vw, 4rem)/1.02 var(--display);
  display: inline-block; padding: 0 .08em .04em;
}
.window-glass .flourish { margin: 20px auto 18px; }
.window-note {
  margin: 0 0 30px; max-width: 30ch;
  font: 400 clamp(1.15rem, 2.2vw, 1.45rem)/1.4 var(--display-text);
  color: #e9eef6;
}
.bulkhead {
  height: 70px; margin: 12px 12px 0;
  background:
    linear-gradient(var(--wood), var(--wood)) padding-box;
  box-shadow: inset 0 0 0 1px var(--wood-hi), inset 0 0 0 10px var(--wood), inset 0 0 0 11px var(--wood-lo), inset 0 0 0 12px var(--wood-hi);
}
.sidewalk {
  height: 26px; margin-top: 0;
  background: linear-gradient(180deg, #8f8a82 0 4px, var(--stone) 4px);
}

/* ── lead ───────────────────────────────────────────────── */
.lead { padding-top: 64px; padding-bottom: 72px; }
.lead-text {
  margin: 0; max-width: 32ch;
  font: 400 clamp(1.5rem, 3.8vw, 2.2rem)/1.3 var(--display-text);
}
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ── the jewelry case ───────────────────────────────────── */
.case {
  background:
    radial-gradient(80% 120% at 15% 50%, #3d2542, transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px),
    var(--velvet);
  color: #efe6ee;
  padding: 88px 0;
  border-top: 1px solid var(--gold-lo);
  border-bottom: 1px solid var(--gold-lo);
}
.case-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 56px; align-items: center; }
.ring { width: 100%; height: auto; max-width: 200px; }
.case h2 { font: italic 400 clamp(2.2rem, 5vw, 3.2rem)/1.05 var(--display); color: var(--gold); }
.case h3 { font: italic 400 1.5rem/1.2 var(--display-text); color: var(--gold); margin-top: 30px; }
.case p { margin: 12px 0 0; max-width: 36rem; font-size: 1.125rem; }

/* ── two floors ─────────────────────────────────────────── */
.floors {
  padding-top: 96px; padding-bottom: 96px;
  display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 64px; align-items: start;
}
.elevation { margin: 0; color: var(--ink); }
.elevation svg { display: block; width: 100%; height: auto; }
.elev-num { font: italic 400 13px var(--display-text); fill: currentColor; }
.elevation figcaption { margin-top: 14px; font-size: .95rem; color: var(--ink-soft); }
.floors h2 { font-size: clamp(2.2rem, 5vw, 3.2rem); font-style: italic; }
.stock { margin: 28px 0 0; }
.stock div {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 4px 24px;
  padding: 16px 0; border-top: 1px solid var(--rule);
}
.stock div:last-child { border-bottom: 1px solid var(--rule); }
.stock dt { font: 400 1.25rem/1.3 var(--display-text); }
.stock dd { margin: 0; color: var(--ink-soft); }
.floors-note { margin: 24px 0 0; max-width: 36rem; }

/* ── visit ──────────────────────────────────────────────── */
.visit { background: var(--glass); color: #e6ecf4; padding: 88px 0 96px; }
.visit h2 { font: italic 400 clamp(2.4rem, 6vw, 3.6rem)/1 var(--display); color: var(--gold); }
.visit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 40px; }
.vblock h3 { font: 400 1.3rem/1.2 var(--display-text); color: #fff; margin-bottom: 14px; }
.vblock address { font-style: normal; font-size: 1.125rem; }
.vblock .meta { color: #a9b7ca; margin: 6px 0 18px; }
.visit .btn-line { border-color: var(--gold); color: var(--gold-hi); }
.visit .btn-line:hover { background: var(--gold); color: var(--glass-lo); }
.hours { border-collapse: collapse; width: 100%; font-size: 1.0625rem; }
.hours th, .hours td { text-align: left; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.12); vertical-align: top; }
.hours th { font-weight: 400; padding-right: 16px; }
.hours td { white-space: nowrap; }
.hours tr.today th, .hours tr.today td { font-weight: 700; color: #fff; }
.today-tag {
  display: inline-block; margin-left: 8px; padding: 1px 7px;
  font: 700 .75rem/1.5 var(--body); color: var(--glass-lo); background: var(--gold); border-radius: 2px;
}
.phone { margin: 0 0 18px; font: 400 clamp(1.7rem, 3vw, 2.1rem)/1.1 var(--display); }
.phone a { text-decoration: none; white-space: nowrap; }

/* ── footer ─────────────────────────────────────────────── */
.foot { background: var(--glass-lo); color: #93a3b8; font-size: .95rem; padding: 28px 0 32px; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; }
.foot p { margin: 0; }
.foot a { color: #c8d3e3; }

.callbar { display: none; }

/* ── narrow screens: the door first, the window under it ── */
@media (max-width: 860px) {
  .facade { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-top: 22px; }
  .door { max-width: 440px; width: 100%; margin: 0 auto; }
  .window-glass { padding: 28px 20px 24px; }
  .case-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ring { max-width: 120px; }
  .floors { grid-template-columns: minmax(0, 1fr); gap: 44px; padding-top: 72px; padding-bottom: 72px; }
  .elevation { max-width: 320px; }
  .visit-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 560px) {
  .stock div { grid-template-columns: minmax(0, 1fr); }
  .pane { padding: 34px 14px 30px; }
  .leaf { padding: 16px 16px 0; }
  .kick { margin: 0 -16px; }
  .window-glass { margin: 10px 4px; }
  body { padding-bottom: 60px; }
  .callbar {
    display: flex; align-items: center; justify-content: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    height: 60px;
    background: var(--glass); color: var(--gold-hi);
    font: 700 1.05rem/1 var(--body); text-decoration: none;
    border-top: 1px solid var(--gold-lo);
  }
}

@media (prefers-reduced-motion: reduce) {
  .glass::after, .sign { animation: none; }
  .glass::after { background-position: 0 0; opacity: 0; }
}