/* Picture Perfect. Every color, font, and main size lives here, in one place. */
:root {
  color-scheme: only light;

  /* From their window sign and their building */
  --ink: #b01c30;
  --ink-deep: #7f1222;
  --board: #c5d8d1;
  --board-soft: #e3eeea;
  --brick-deep: #2f1712;
  --brick: #8f3d2c;
  --trim: #ffffff;
  --paper: #fbf7f0;
  --text: #2a1c18;
  --text-soft: #5d4a43;
  --brass: #c9a35a;

  --sign-font: "Fjalla One", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body-font: "Literata", Georgia, "Times New Roman", serif;

  --gutter: clamp(16px, 4vw, 40px);
  --wrap: 1120px;
}

@font-face { font-family: "Fjalla One"; src: url("../fonts/fjalla-one-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Literata"; src: url("../fonts/literata-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Literata"; src: url("../fonts/literata-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Literata"; src: url("../fonts/literata-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--brick-deep); -webkit-tap-highlight-color: transparent; }
body { margin: 0; background: var(--paper); color: var(--text); font: 400 1.125rem/1.6 var(--body-font); overflow-x: hidden; }
img, svg { display: block; }
h1, h2, h3, p, ul, figure, blockquote { margin: 0; padding: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
.nb { white-space: nowrap; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
[id] { scroll-margin-top: 8px; }


/* ---------- The first screen: the name, the sign, and the call button ---------- */

.first { display: flex; flex-direction: column; height: 100vh; height: 100svh; min-height: 560px; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 6px 18px; flex-wrap: wrap; padding: 8px var(--gutter); background: var(--brick-deep); color: #fff; }
.top-name { display: none; font: 400 1.25rem/1.2 var(--sign-font); text-decoration: none; letter-spacing: .01em; }
.top nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 clamp(9px, 3.4vw, 30px); margin: 0 auto; }
.top nav a { display: inline-block; padding: 4px 2px; font-size: 1rem; line-height: 1.5; text-decoration: none; }
.top nav a:hover { text-decoration: underline; }
@media (min-width: 720px) { .top-name { display: block; } .top nav { margin: 0; } }

.hero { position: relative; flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; }

/* The wall: the sign and everything on it scale together from one number, --u, so nothing can drift apart. */
.wall { position: relative; overflow: hidden; container-type: size; background: #7b3528 url("../img/wall.webp") center bottom / 576px 384px; }
.wall::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, rgba(255, 214, 160, .10), rgba(255, 214, 160, 0) 46%, rgba(20, 8, 6, .12)); }

/* The top of the building. It sits behind the sign, so on a short screen the sign simply covers it. */
.roofline { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; }
.roof-sky { height: 26px; background: linear-gradient(180deg, #a9cfe6, #dbe9ec); transition: background 2.4s; }
.roof-cap { height: 12px; background: linear-gradient(180deg, #c07a5c, #8f4a34); box-shadow: 0 3px 4px rgba(20, 8, 6, .4); }
.roof-steps { height: 15px; margin-top: 9px; background: repeating-linear-gradient(90deg, rgba(38, 16, 12, .55) 0 9px, rgba(38, 16, 12, 0) 9px 25px); }
.roof-band { height: 8px; margin-top: 7px; background: linear-gradient(180deg, #b96f52, #87432f); box-shadow: 0 3px 5px rgba(20, 8, 6, .4); }
.wall[data-sky="dusk"] .roof-sky { background: linear-gradient(180deg, #55608f, #f0a877); }
.wall[data-sky="night"] .roof-sky { background: linear-gradient(180deg, #0e1530, #26305a); }

.front { --roof: 66px; --u: min(calc((100cqh - var(--roof)) / 1262), calc((100cqw - 20px) / 1000)); position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-end; }
.scene-wrap { position: relative; flex: none; width: calc(var(--u) * 1000); height: calc(var(--u) * 1260); }
.scene { width: 100%; height: 100%; overflow: visible; }
.door-wrap, .win2 { display: none; flex: none; height: calc(var(--u) * 1260); overflow: visible; }
.door-wrap { position: relative; width: calc(var(--u) * 530); }
.door { width: 100%; height: 100%; overflow: visible; }
.win2 { width: calc(var(--u) * 700); }
@container (min-width: 720px) {
  .front { --u: min(calc((100cqh - var(--roof)) / 1262), calc((100cqw - 24px) / 1530)); }
  .door-wrap { display: block; }
  .scene-wrap .lamp, .scene-wrap .lamp-light { display: none; }
}
@container (min-width: 1040px) {
  .front { --u: min(calc((100cqh - var(--roof)) / 1262), calc((100cqw - 24px) / 2230)); }
  .win2 { display: block; }
}
/* On a short screen the sign needs every bit of height, so the top of the building steps aside. */
@container (max-height: 400px) {
  .front { --roof: 0px; }
  .roofline { display: none; }
}

/* Older browsers can't measure the wall this way, so they size the sign from the screen instead. */
@supports not (width: 1cqw) {
  .front { --u: min(calc(58vh / 1262), calc((100vw - 20px) / 1000)); }
}

/* The P's. */
.pee-hit { cursor: pointer; outline: none; }
.pee-hit:focus-visible { outline: none; stroke: var(--brass); stroke-width: 6; }
.pee-ink { transition: opacity .2s; }
.pee.lifted .pee-ink { opacity: .11; }
.pee.lifted .pee-glass, .pee.lifted .glint { visibility: hidden; }
.hint { opacity: 0; display: none; transition: opacity .5s; }
.js .hint { display: block; }
.hint.show { opacity: 1; }

/* Time of day, from the real sun over Marion. */
.sky { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 2.4s; mix-blend-mode: multiply; }
.wall[data-sky="dusk"] .sky { opacity: 1; background: linear-gradient(180deg, #8a7fa8, #d9a68a); }
.wall[data-sky="night"] .sky { opacity: 1; background: linear-gradient(180deg, #3b4464, #5a5a78); }
.lamp-light { position: absolute; left: 50%; top: 7.8%; width: 86%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity 2.4s; background: radial-gradient(closest-side, rgba(255, 216, 138, .85), rgba(255, 199, 101, .26) 34%, rgba(255, 199, 101, 0)); z-index: -1; }
.wall[data-sky="dusk"] .lamp-light { opacity: .75; }
.wall[data-sky="night"] .lamp-light { opacity: 1; }
.wall[data-sky="dusk"] .lamp-pane, .wall[data-sky="night"] .lamp-pane { fill: #ffe7ad; }
.door-wrap, .win2 { position: relative; }
.wall[data-sky="dusk"] .front, .wall[data-sky="night"] .front { z-index: 1; }

/* The dimmed wall behind a lifted mirror, with the patch of light it throws. */
/* The stage covers the hero down to the call button. --band, set by the script, is how much room that button needs. */
.stage { position: absolute; left: 0; right: 0; top: 0; bottom: var(--band, 0px); z-index: 9; overflow: hidden; pointer-events: none; }
.scrim { position: absolute; inset: 0; z-index: 3; opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .45s, visibility .45s; --sx: 72%; --sy: 22%; background: radial-gradient(circle 38vmin at var(--sx) var(--sy), rgba(24, 10, 8, .28), rgba(24, 10, 8, .8) 100%); }
.scrim.show { opacity: 1; visibility: visible; pointer-events: auto; }

.panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; padding: 22px 12px 10px; text-align: center; color: #fff; background: linear-gradient(180deg, rgba(24, 10, 8, 0), rgba(24, 10, 8, .8) 22px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.panel.show { opacity: 1; visibility: visible; pointer-events: auto; }
.line { font: 400 clamp(1.3rem, 5.2vw, 1.7rem)/1.2 var(--sign-font); letter-spacing: .01em; }
.line span { white-space: nowrap; }
/* In the opening, the mirror and the line have the stage to themselves, and the address and hours stay in view. */
.panel.brief .chips, .panel.brief .acts, .panel.brief .note { display: none; }
.panel.brief { padding-bottom: 12px; background: linear-gradient(180deg, rgba(24, 10, 8, 0), rgba(24, 10, 8, .5) 22px); }
.panel.brief .line { font-size: clamp(1.5rem, 6vw, 2.1rem); }
.note:empty { display: none; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; }
.chips button { min-height: 38px; padding: 4px 13px; border: 0; border-radius: 19px; background: #fff; color: var(--ink-deep); font: 600 .95rem/1.2 var(--body-font); }
.panel[data-mode="hair"] .chips button[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: 0 0 0 2px #fff; }
.acts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 14px; margin-top: 8px; }
.see { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 4px 16px; border: 2px solid var(--brass); border-radius: 21px; background: rgba(0, 0, 0, .34); color: #fff; font: 600 1rem/1.2 var(--body-font); }
.see[aria-pressed="true"] { background: var(--brass); color: #1d120c; }
.back { min-height: 42px; padding: 4px 8px; border: 0; background: none; color: #fff; font: 400 1rem/1.2 var(--body-font); text-decoration: underline; text-underline-offset: 3px; }
.note { margin-top: 2px; font-size: .84rem; line-height: 1.3; color: rgba(255, 255, 255, .9); }
@media (max-height: 640px) {
  .chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-left: -12px; margin-right: -12px; padding: 2px 12px; }
  .chips button { flex: none; min-height: 34px; }
  .acts { margin-top: 4px; }
  .see, .back { min-height: 36px; }
  .note { margin-top: 0; font-size: .78rem; }
}

/* The mirror once it has left the sign. It stays one size in the layout; moving and scaling happen in its transform. */
.mirror { position: absolute; left: 0; top: 0; z-index: 5; transform-origin: 0 0; will-change: transform; pointer-events: none; }
.mirror[hidden] { display: none; }
.frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.glass { position: absolute; overflow: hidden; border-radius: 50%; background: #b19a85; opacity: 0; pointer-events: auto; touch-action: pan-y; cursor: grab; }
.glass .room, .glass canvas, .glass video { position: absolute; inset: 0; width: 100%; height: 100%; }
.glass .room { object-fit: cover; }
.glass.ask .room { filter: saturate(.3) brightness(1.12); }
.glass video { object-fit: cover; transform: scaleX(-1); visibility: hidden; background: #000; }
.glass.you video { visibility: visible; }
.glass.you canvas, .glass.you .cape { visibility: hidden; }
.glass.room-only canvas, .glass.room-only .cape { visibility: hidden; }
.cape { position: absolute; left: -6%; right: -6%; bottom: -11%; height: 36%; border-radius: 50% 50% 0 0 / 62% 62% 0 0; background: linear-gradient(180deg, #24222a, #101013); }
.sheen { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background:
  linear-gradient(118deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .05) 22%, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .08) 84%, rgba(255, 255, 255, 0) 100%),
  radial-gradient(closest-side, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, .3) 100%); }

.glass-see { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; align-items: center; gap: 8px; min-height: 48px; padding: 6px 18px; border: 0; border-radius: 24px; background: #fff; color: var(--ink-deep); font: 600 1.05rem/1.2 var(--body-font); white-space: nowrap; box-shadow: 0 3px 12px rgba(0, 0, 0, .35); }
.glass.ask .glass-see { display: inline-flex; }
.glass.ask .cape { visibility: hidden; }
.panel[data-mode="room"] .see { display: none; }

.pause { position: absolute; right: 8px; top: 8px; z-index: 10; display: none; width: 34px; height: 34px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: rgba(21, 23, 26, .62); color: #fff; }
.js .hero.mirror-up .pause { display: grid; }
.pause svg { fill: currentColor; }
.pause .i-play { display: none; }
.pause[aria-pressed="true"] .i-play { display: block; }
.pause[aria-pressed="true"] .i-pause { display: none; }
@media (prefers-reduced-motion: reduce) { .js .hero.mirror-up .pause { display: none; } }

/* With a mirror up on a phone, the words on the sidewalk step aside. Nothing moves, and the call button stays put. */
@media (max-width: 759px) {
  .hero.is-up .where, .hero.is-up .when { visibility: hidden; }
}

/* The sidewalk, with the big call button. */
.walk { position: relative; display: grid; gap: 8px; justify-items: center; padding: 10px var(--gutter) 12px; text-align: center; background: #ded8cd url("../img/sidewalk.webp") center / 480px 240px; box-shadow: 0 -3px 0 rgba(0, 0, 0, .18); }
.where { font-size: 1rem; line-height: 1.35; font-weight: 600; }
.where .kind { display: block; font: 400 1rem/1.3 var(--sign-font); letter-spacing: .03em; text-transform: uppercase; color: var(--ink-deep); }
.call { display: block; width: 100%; max-width: 440px; padding: 12px 16px; border-radius: 10px; background: var(--ink); color: #fff; font: 400 1.5rem/1.2 var(--sign-font); letter-spacing: .015em; text-align: center; text-decoration: none; box-shadow: 0 3px 0 var(--ink-deep); }
.call:hover { background: var(--ink-deep); }
.when { font-size: 1rem; line-height: 1.35; font-weight: 600; }
@media (min-width: 760px) {
  .walk { grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 14px var(--gutter); }
  .where { grid-column: 1; grid-row: 1; text-align: left; justify-self: start; }
  .call { grid-column: 2; grid-row: 1; width: auto; min-width: 320px; }
  .when { grid-column: 3; grid-row: 1; text-align: right; justify-self: end; }
}
@media (max-height: 640px) {
  .walk { gap: 5px; padding: 6px var(--gutter) 8px; }
  .where { font-size: .92rem; }
  .where .kind { display: inline; }
  .call { padding: 9px 12px; font-size: 1.3rem; }
  .when { font-size: .92rem; }
}


/* ---------- Below the first screen ---------- */

section h2 { font: 400 clamp(2.2rem, 7vw, 3.4rem)/1.08 var(--sign-font); letter-spacing: .01em; text-transform: uppercase; color: var(--ink); }
section h3 { font: 400 1.5rem/1.2 var(--sign-font); letter-spacing: .01em; text-transform: uppercase; color: var(--ink); }

.what { padding: clamp(40px, 8vw, 80px) 0; background: var(--board); }
.lead { margin-top: 8px; font-size: clamp(1.2rem, 3.6vw, 1.5rem); line-height: 1.35; }
.services { list-style: none; margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 0 32px; }
.services li { padding: 10px 0; border-bottom: 2px solid rgba(127, 18, 34, .22); font: 400 clamp(1.45rem, 4.4vw, 1.8rem)/1.2 var(--sign-font); letter-spacing: .01em; color: var(--ink-deep); }
.blank { margin-top: 20px; font-style: italic; color: var(--text-soft); }

/* Reviews hang on the wall in frames, the way pictures do. */
.say { padding: clamp(40px, 8vw, 80px) 0; background: #6e2f24 url("../img/wall.webp") center / 576px 384px; }
.say h2, .say .stars { color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .55); }
.stars { margin-top: 8px; font-size: 1.15rem; font-weight: 600; }
.star-row { position: relative; display: inline-block; white-space: nowrap; letter-spacing: .08em; color: rgba(255, 255, 255, .42); }
.star-row::before { content: "\2605\2605\2605\2605\2605"; position: absolute; left: 0; top: 0; width: 96%; overflow: hidden; color: #ffd98a; } /* 4.8 of 5 stars is 96% */
.gallery { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; align-items: center; }
.pic { position: relative; padding: 20px; background: #fff; border: 9px solid #1d1412; border-radius: 2px; box-shadow: 0 10px 18px rgba(0, 0, 0, .42), inset 0 0 0 1px rgba(0, 0, 0, .1); }
.pic:nth-child(3n + 1) { transform: rotate(-.7deg); }
.pic:nth-child(3n + 2) { transform: rotate(.5deg); }
.pic blockquote { font-size: 1.15rem; line-height: 1.42; font-style: italic; }
.pic figcaption { margin-top: 10px; font: 400 .85rem/1.2 var(--sign-font); letter-spacing: .05em; text-transform: uppercase; color: var(--text-soft); }
.pic.big { grid-column: 1 / -1; padding: clamp(22px, 5vw, 44px); text-align: center; }
.pic.big blockquote { font: 400 clamp(2rem, 6.6vw, 3.4rem)/1.12 var(--sign-font); font-style: normal; color: var(--ink); }
.pic.empty { display: grid; place-items: center; min-height: 170px; background: var(--board-soft); }
.pic.empty p { font-style: italic; color: var(--text-soft); }

.visit { padding: clamp(40px, 8vw, 80px) 0; }
.visit-grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .visit-grid { grid-template-columns: 5fr 7fr; gap: 48px; } }
.address { margin-top: 10px; font-size: 1.25rem; line-height: 1.4; font-weight: 600; }
.address br + * { font-weight: 400; }
.visit h3 { margin-top: 24px; }
.hours { width: 100%; margin-top: 6px; border-collapse: collapse; }
.hours th, .hours td { padding: 8px 0; border-bottom: 1px solid rgba(42, 28, 24, .18); text-align: left; vertical-align: top; font-weight: 400; }
.hours td { padding-left: 16px; text-align: right; font-weight: 600; }
.their-words { margin-top: 16px; }
.plain { margin-top: 10px; color: var(--text-soft); }
.buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.btn { flex: 1 1 200px; display: block; padding: 12px 16px; border: 2px solid var(--ink); border-radius: 10px; color: var(--ink-deep); font: 400 1.25rem/1.2 var(--sign-font); letter-spacing: .015em; text-align: center; text-decoration: none; }
.btn:hover { background: var(--board-soft); }
.btn.solid { background: var(--ink); color: #fff; }
.btn.solid:hover { background: var(--ink-deep); }
.building svg { width: 100%; height: auto; }

.foot { padding: 28px 0 34px; background: var(--brick-deep); color: #fff; }
.foot-row { display: grid; gap: 18px; }
.foot-name { font: 400 1.5rem/1.2 var(--sign-font); }
.foot-name > span { display: block; margin-top: 2px; font: 400 1rem/1.4 var(--body-font); }
.draft { font-size: .95rem; }
.try button { padding: 2px 0; border: 0; background: none; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.try { display: none; }
.js .try { display: block; }
.credit { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: #fff; text-decoration: none; }
.credit:hover { text-decoration: underline; }
@media (min-width: 900px) { .foot-row { grid-template-columns: 1fr auto auto; align-items: center; gap: 36px; } }

/* A call button that stays handy on phones, once the big one has scrolled away. */
.callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: none; padding: 11px 16px calc(11px + env(safe-area-inset-bottom)); background: var(--ink); color: #fff; font: 400 1.35rem/1.2 var(--sign-font); text-align: center; text-decoration: none; box-shadow: 0 -2px 10px rgba(0, 0, 0, .3); }
@media (max-width: 720px) {
  .js body.past-call .callbar { display: block; }
  .js body.past-call .foot { padding-bottom: 86px; }
}