/* Hand Picked Antiques. All colors, fonts, and sizes are here at the top. */
:root {
  color-scheme: only light;

  /* from their board and their building */
  --green: #0B5A2B;
  --cream: #F3EDC2;
  --wall-color: #E6E0D0;
  --block-shadow: #B7B3A7;
  --slate: #46638D;
  --slate-dark: #374D64;
  --slate-light: #527299;
  --iron: #2D3639;
  --iron-dark: #232B2D;
  --brick: #8A2F1E;
  --brick-dark: #5D1E13;
  --brick-light: #A03822;
  --pine: #C99A5F;
  --pine-dark: #A87B45;
  --peg-tan: #B59B7D;
  --peg-blue: #7F9BBF;
  --peg-ink: #152029;
  --black: #0A0C09;
  --paper: #FFF8E2;
  --glass: #0E1A24;
  --focus: #E0A63C;

  /* the painted sign's own lines */
  --sign-pin: #E9E4BC;
  --sign-pencil: #D8D3A3;

  /* the studio's credit, in its own green and gold */
  --credit-paper: #F7F2DF;
  --credit-gold: #C8A35A;
  --credit-gold-soft: #E6C983;
  --credit-ink: #152221;

  /* what a look changes: the wall behind the sign, and the sections that aren't photos */
  --wall: var(--wall-color);
  --wall-ink: var(--iron);
  --section: var(--green);
  --section-ink: var(--cream);
  --section-soft: rgba(243, 237, 194, .82);
  --heading: var(--cream);

  /* what the lights change */
  --light-tint: rgba(0, 0, 0, 0);
  --glass-dark: rgba(8, 14, 20, .3);
  --glass-photo: 1;

  --font-head: "Rammetto One", Georgia, serif;
  --font-body: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --font-note: "Kalam", "Libre Caslon Text", Georgia, serif;

  --text: 1.0625rem;
  --text-small: .9375rem;
  --text-tiny: .8125rem;
  --text-big: 1.25rem;
  --head-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.75rem);
  --window-head: clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem);
  --window-word: clamp(.8125rem, .62rem + .85vw, 1rem);
  --gutter: 16px;
  --sign-max: 1000px;
  --page-max: 860px;
  --walls-max: 1500px;
  --windows-max: 1240px;
  --frame: 12px;
  --bar-height: 76px;
  --sticky-room: 52px;
}

html[data-look="cream"] { --section: var(--wall-color); --section-ink: var(--iron); --section-soft: rgba(45, 54, 57, .82); }
html[data-look="cream"] .narrow > .painted { --heading: var(--green); }
html[data-look="iron"] { --wall: var(--iron); --wall-ink: var(--cream); --section: var(--iron-dark); }
html[data-look="blue"] { --wall: var(--peg-blue); --wall-ink: var(--peg-ink); --section: var(--peg-blue); --section-ink: var(--peg-ink); --section-soft: rgba(21, 32, 41, .85); }

/* After hours the wall goes slate blue and the windows stay lit, the way a shop window looks best at night. */
html[data-light="evening"] { --light-tint: rgba(20, 34, 56, .55); --wall-ink: var(--cream); --glass-dark: rgba(60, 36, 8, .12); --glass-photo: 1; }
html[data-light="closed"] { --light-tint: rgba(9, 17, 30, .8); --wall-ink: var(--cream); --glass-dark: rgba(60, 36, 8, .18); --glass-photo: 1; }

@font-face { font-family: "Rammetto One"; src: url(../fonts/rammetto-one.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url(../fonts/libre-caslon-text-regular.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; font-style: italic; src: url(../fonts/libre-caslon-text-italic.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; font-weight: 700; src: url(../fonts/libre-caslon-text-bold.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Kalam"; font-weight: 700; src: url(../fonts/kalam-700.woff2) format("woff2"); font-display: swap; }

* { box-sizing: border-box; }
/* overscroll-behavior-x: a sideways swipe plays the page; it never sends the browser back a page. */
html { background: var(--wall-color); scroll-behavior: smooth; overscroll-behavior-x: none; }
body { margin: 0; color: var(--section-ink); font: var(--text)/1.5 var(--font-body); background: var(--section); overscroll-behavior-x: none; }
h1, h2, h3, p { margin: 0; }
img { max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.defs { position: absolute; }
.nb { white-space: nowrap; }
.hand { width: 2em; height: 1em; vertical-align: -.14em; margin-right: .35em; flex: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Headings look like the sign's letters: cream, a hard black offset shadow, a thin brick edge. */
.painted {
  font: 400 var(--head-size)/1.15 var(--font-head);
  color: var(--heading);
  text-shadow:
    .8px .8px 0 var(--brick), -.8px -.8px 0 var(--brick), .8px -.8px 0 var(--brick), -.8px .8px 0 var(--brick),
    -.06em .07em 0 var(--black);
}

/* ---- draft strip ---- */
.draft { position: relative; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; min-height: 36px; padding: 3px var(--gutter); background: var(--iron); color: var(--cream); font-size: var(--text-small); }
.draft-btn { min-height: 30px; padding: 0 10px; background: none; border: 1px solid rgba(243, 237, 194, .55); border-radius: 3px; cursor: pointer; }
.look-panel { position: absolute; top: 100%; left: 8px; right: 8px; max-width: 480px; padding: 10px 12px; background: var(--iron); border: 1px solid rgba(243, 237, 194, .4); border-radius: 0 0 4px 4px; box-shadow: 0 8px 18px rgba(0, 0, 0, .35); }
.look-panel[hidden] { display: none; }
.look-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.look-row + .look-row { margin-top: 8px; }
.look-row > span { width: 100%; font-weight: 700; }
.look-row button { min-height: 36px; padding: 0 10px; background: none; border: 1px solid rgba(243, 237, 194, .5); border-radius: 3px; cursor: pointer; }
.look-row button[aria-pressed="true"] { background: var(--cream); color: var(--iron); }
html:not(.js) .draft-btn { display: none; }

/* ---- top bar ---- */
.topbar { position: sticky; top: 0; z-index: 15; display: flex; justify-content: center; background: var(--slate); box-shadow: 0 2px 0 var(--slate-dark); white-space: nowrap; }
.topbar a { padding: 9px clamp(8px, 3.4vw, 26px); color: var(--cream); text-decoration: none; }
.topbar a:hover { background: var(--slate-dark); }
section[id], [id^="wall-"] { scroll-margin-top: var(--sticky-room); }

/* ---- the block wall ---- */
.wallface {
  color: var(--wall-ink);
  background-color: var(--wall);
  background-image:
    linear-gradient(var(--light-tint), var(--light-tint)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='96'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.06' stroke-width='1.500'%3E%3Cpath d='M0 47.500h192M0 95.500h192M96 0v47.500M48 48v47.500M144 48v47.500'/%3E%3C/g%3E%3Cpath d='M0 49h192M0 1h192' stroke='%23fff' stroke-opacity='.12' fill='none'/%3E%3C/svg%3E");
}

/* ---- first screen ---- */
.front { padding: 8px 8px 14px; }
.board { display: block; margin: 0 auto; width: 100%; touch-action: pan-y; box-shadow: 0 6px 22px rgba(40, 34, 20, .35), 0 1px 3px rgba(40, 34, 20, .3); }
#sign { display: block; width: 100%; height: auto; touch-action: pan-y; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.js #sign:not([data-ready]) { visibility: hidden; }
.pin { fill: none; stroke: var(--sign-pin); stroke-width: 1.5; }
.lr { fill: var(--brick); } .lk { fill: var(--black); } .lc { fill: var(--cream); } .lg { fill: var(--cream); opacity: .34; }
.lp { fill: none; stroke: var(--sign-pencil); stroke-width: .7; opacity: .85; }
.piece, .lt { cursor: pointer; }
.piece { outline: none; }

.front-words { text-align: center; padding: 10px 8px 0; }
.tag { font-size: var(--text-big); font-weight: 700; }
.hintline { min-height: 1.5em; opacity: 0; transition: opacity .6s ease; font-size: var(--text-small); }
/* On a phone the hint keeps room for two lines, so the address under it never jumps when the words change. */
@media (max-width: 699px) { .hintline { min-height: 2.7em; } .wide-only { display: none; } }
.hintline.on { opacity: 1; }
html:not(.js) .hintline, html:not(.js) .chips { display: none; }
.where { font-weight: 700; }
.hours { font-size: var(--text-small); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 6px 18px; border-radius: 4px; font-weight: 700; text-decoration: none; text-align: center; color: var(--paper); }
.btn-call { background: var(--brick); box-shadow: 0 2px 0 var(--brick-dark); }
.btn-way { background: var(--slate); box-shadow: 0 2px 0 var(--slate-dark); }
.btn-call:hover { background: var(--brick-light); }
.btn-way:hover { background: var(--slate-light); }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.actions { display: flex; gap: 8px; justify-content: center; margin: 10px 0 8px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; }
.chips button { min-height: 40px; padding: 0 12px; background: rgba(255, 252, 240, .72); color: inherit; border: 1.5px solid currentColor; border-radius: 3px; font-size: var(--text-small); cursor: pointer; }
html[data-light="evening"] .chips button, html[data-light="closed"] .chips button, html[data-look="iron"] .chips button { background: rgba(10, 14, 16, .55); }
.chips button:hover { background: var(--paper); }
.chips button[aria-pressed="true"]#b-pause { opacity: 1; background: var(--wall-ink); color: var(--wall); border-color: var(--wall-ink); }
#b-strum { position: absolute; left: -9999px; }
#b-strum:focus { position: static; opacity: 1; }

/* Phones: Call and Directions stay in a bar at the bottom, and the page leaves room for it. */
@media (max-width: 699px) {
  body { padding-bottom: calc(var(--bar-height) + env(safe-area-inset-bottom)); }
  .actions { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; margin: 0; padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); background: var(--iron); box-shadow: 0 -2px 10px rgba(0, 0, 0, .3); }
  .actions .btn { flex: 1 1 0; padding: 4px; min-height: 50px; font-size: clamp(.875rem, 4.3vw, var(--text)); }
  .actions .btn-call { flex-grow: 1.5; }
}

/* Wide windows: the sign fits the window's height, and the windows' tops show under it on the same wall. */
.wide .board { width: min(100%, var(--sign-max), max(420px, calc((100vh - 360px) * 1271 / 638))); }
html:not(.js) .board { max-width: var(--sign-max); }
@media (min-width: 700px) {
  .front { padding: 18px 24px 10px; }
  .front-words .where, .front-words .hours { display: inline; }
  .front-words .where::after { content: "  "; white-space: pre; }
  .front-words .hours::after { content: "\A"; white-space: pre; }
  .actions, .chips { display: inline-flex; vertical-align: middle; margin: 8px 4px 0; }
  .actions .btn { min-height: 44px; }
  /* An upright tablet: the tall sign leaves room for the call button on the first screen. */
  .tall .board { width: min(100%, calc((100vh - 270px) * 800 / 880)); }
}

/* ---- windows ---- */
.windows { padding: 10px var(--gutter) 34px; text-align: center; }
.windows .painted { font-size: var(--window-head); }
.windows .under { margin-bottom: 12px; font-size: var(--text-small); }
.window-row { display: grid; gap: 22px; grid-template-columns: 1fr; max-width: var(--windows-max); margin: 0 auto; }
@media (min-width: 700px) { .window-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .window-row { grid-template-columns: repeat(4, 1fr); } }

.window { display: block; position: relative; padding: 8px 8px 16px; color: #fff; text-decoration: none; background: linear-gradient(var(--slate), var(--slate)) top / 100% calc(100% - 8px) no-repeat; box-shadow: 0 8px 14px -8px rgba(30, 26, 14, .55); }
/* the sill */
.window::after { content: ""; position: absolute; left: -6px; right: -6px; bottom: 0; height: 12px; background: var(--slate); box-shadow: 0 3px 0 var(--slate-dark), 0 6px 8px rgba(30, 26, 14, .4); }
.glass { position: relative; display: block; aspect-ratio: 16 / 11; overflow: hidden; background: var(--glass); box-shadow: inset 0 0 0 2px var(--slate-dark); }
.glass img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: var(--glass-photo); transition: opacity .5s ease; }
.glass::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--glass-dark); transition: background-color .5s ease; }
.panes { position: absolute; inset: 0; z-index: 2; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); }
.panes > * { display: block; border: 1.5px solid var(--slate-dark); }
.panes > span { padding: 5px 2px 0; text-align: center; font-size: var(--window-word); line-height: 1.15; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .75); }
@media (min-width: 1000px) { .panes > span { font-size: clamp(.75rem, .35rem + .62vw, 1.0625rem); } }
.shine { position: absolute; inset: 0; z-index: 3; background: linear-gradient(118deg, rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, .13) 34%, rgba(255, 255, 255, .03) 44%, rgba(255, 255, 255, .11) 50%, rgba(255, 255, 255, 0) 60%); pointer-events: none; }
.window:hover .glass::before { background: rgba(8, 14, 20, .08); }
.window:focus-visible { outline-offset: 5px; }

/* ---- sections ---- */
.section { background: var(--section); color: var(--section-ink); padding: 40px var(--gutter); }
.section .painted { margin-bottom: 14px; }
.narrow { max-width: var(--page-max); margin: 0 auto; }
.narrow > p { margin-bottom: 10px; }
.plain { color: inherit; font-weight: 700; }
.stars { margin-top: 26px; font-weight: 700; font-size: var(--text-big); }
.blank { font-style: italic; color: var(--section-soft); }
.small { font-size: var(--text-small); color: var(--section-soft); }
.their-words { font-size: var(--text-big); }
.num { font-weight: 700; }
.changing .sub { margin-top: 26px; font-size: var(--text-big); }
.space-grid { display: grid; gap: 28px; }
@media (min-width: 760px) { .space-grid { grid-template-columns: repeat(2, 1fr); } }
.space-grid h3 { margin-bottom: 6px; font-size: var(--text-big); }
.space-grid p { margin-bottom: 8px; }
.visit-grid { display: grid; gap: 22px; }
@media (min-width: 700px) { .visit-grid { grid-template-columns: minmax(240px, 1fr) 1.2fr; } }
.visit-grid p { margin-bottom: 8px; }
.hours-table { border-collapse: collapse; width: 100%; max-width: 340px; }
.hours-table th, .hours-table td { padding: 5px 0; text-align: left; font-weight: 400; border-bottom: 1px solid rgba(128, 128, 128, .35); }
.hours-table td { text-align: right; }
.hours-table th { position: relative; padding-left: 2.6em; }
.hours-table .hand { position: absolute; left: 0; top: .55em; margin: 0; }
.hours-table tr.today th, .hours-table tr.today td { font-weight: 700; }
.plaque { display: block; width: 76px; height: auto; }
.strip { display: block; width: 100%; height: auto; margin-top: 24px; box-shadow: 0 0 0 6px var(--pine), 0 6px 18px rgba(0, 0, 0, .4); }

/* ---- the painted board over the walls ---- */
.greenboard { position: relative; max-width: var(--page-max); margin: 0 auto 30px; padding: 26px 24px; text-align: center; color: var(--cream); background-color: var(--green); background-image: url(../img/grain.webp); background-size: 640px 640px; box-shadow: inset 0 0 0 7px var(--green), inset 0 0 0 8.5px var(--sign-pin), 0 6px 18px rgba(0, 0, 0, .35); }
.greenboard .painted { --heading: var(--cream); }

/* ---- the walls ---- */
.walls { display: grid; gap: 34px; max-width: var(--walls-max); margin: 0 auto; }
/* Two across: the tall iron wall on the left balances the two low walls on the right, and the instruments get a row of their own. */
@media (min-width: 1000px) {
  .walls { grid-template-columns: repeat(2, 1fr); align-items: start; }
  #wall-1 { grid-column: 1; grid-row: 1 / span 2; }
  #wall-2 { grid-column: 2; grid-row: 1; }
  #wall-4 { grid-column: 2; grid-row: 2; }
  #wall-3 { grid-column: 1 / -1; grid-row: 3; justify-self: center; width: min(100%, 1060px); }
}
.wall-block h3 { margin-bottom: 8px; font-size: var(--text-big); font-weight: 700; }
.frame { position: relative; padding: var(--frame); background: var(--pine) linear-gradient(95deg, rgba(90, 58, 20, .16), rgba(255, 240, 200, .1) 30%, rgba(90, 58, 20, .1) 70%, rgba(255, 240, 200, .12)); box-shadow: inset 0 0 0 1px var(--pine-dark), 0 6px 16px rgba(0, 0, 0, .4); }
.stage-wrap { position: relative; overflow: hidden; background: var(--peg-tan); box-shadow: inset 0 0 0 1px rgba(60, 40, 16, .7); }
.stage-wrap + .stage-wrap { margin-top: var(--frame); }
.stage-wrap > img { display: block; width: 100%; height: auto; }
.stage { position: absolute; touch-action: pan-y; }
.stage img { display: block; width: 100%; height: 100%; }
.thing { position: absolute; display: block; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.thing.scrape { touch-action: none; }
.thing:focus-visible { outline: none; background-color: rgba(224, 166, 60, .5); }
.thing.live { background-repeat: no-repeat; z-index: 3; }
.hole { position: absolute; background-repeat: no-repeat; pointer-events: none; z-index: 2; }
.lens { position: absolute; z-index: 4; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 250, 225, .6), rgba(255, 250, 225, .28) 55%, rgba(255, 250, 225, 0)); }
.lampglow { position: absolute; z-index: 4; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 40, 30, .7), rgba(255, 40, 30, .24) 55%, rgba(255, 40, 30, 0)); }
.caption { display: flex; align-items: center; min-height: 2.6em; padding: 6px 2px 0; font: 700 var(--text)/1.25 var(--font-note); }
.pointer { position: absolute; z-index: 5; width: 56px; height: 28px; overflow: visible; pointer-events: none; }
html:not(.js) .caption { display: none; }
.wall-hint { margin: 0 0 10px; font-size: var(--text-small); }
.caption:has(span:empty) .hand { visibility: hidden; }

@keyframes thing-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.thing.pulse { animation: thing-pulse 1.8s ease-in-out infinite; }
.paused .thing.pulse, .wall-block.away .thing.pulse { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .thing.pulse { animation: none; } }

/* ---- footer ---- */
.foot { padding: 26px var(--gutter) 30px; background: var(--iron); color: var(--cream); font-size: var(--text-small); }
.foot p + p { margin-top: 16px; }
.credit { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px 5px 7px; background: var(--credit-paper); border: 1.5px solid var(--credit-gold); border-radius: 20px; color: var(--credit-ink); font-size: .875rem; font-weight: 700; text-decoration: none; }
.credit:hover { background: var(--credit-ink); color: var(--credit-gold-soft); }
.credit img { width: 22px; height: 22px; }