/* 1-800-girlfriend: shared styles. One typeface everywhere: Times New Roman.
   Colours: white page, black ink, telephone red; after midnight the home page goes black. */
:root { --bg: #fff; --fg: #111; --red: #d3242b; --line: rgba(17,17,17,.18); --times: "Times New Roman", Times, serif; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.45 var(--times); }
/* After midnight (or the After midnight button): every page goes white on black. */
body.night { --bg: #0b0a0a; --fg: #f3e9d6; --line: rgba(243,233,214,.2); }
img { max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.ui { font-family: var(--times); text-transform: uppercase; letter-spacing: .2em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Line art (logo, Call Me, lips) is black on white: multiply drops the white; on black, invert + screen. */
.art { display: block; mix-blend-mode: multiply; }
body.night .art { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }

/* Back to the phone (shop + archive): a little <3, the < points back */
.back { position: fixed; top: 10px; left: 16px; z-index: 20; text-decoration: none; font: 28px/1 var(--times); letter-spacing: -.02em;
        color: var(--fg); background: var(--bg); padding: 4px 6px; border-radius: 6px; transition: color .2s; }
.back:hover { color: var(--red); }

img[data-zoom] { cursor: zoom-in; }

/* The 💋 cursor from the old site, everywhere (mouse/trackpad only; phones have no cursor). */
@media (hover: hover) and (pointer: fine) {
  html, body, * { cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48dGV4dCB4PSI1MCUiIHk9IjMzIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjQwIiBmb250LWZhbWlseT0iQXBwbGUgQ29sb3IgRW1vamksIFNlZ29lIFVJIEVtb2ppLCBOb3RvIENvbG9yIEVtb2ppLCBzYW5zLXNlcmlmIj7wn5KLPC90ZXh0Pjwvc3ZnPg==") 0 0, auto !important; }
}
.lb { position: fixed; inset: 0; z-index: 100; background: rgba(8,7,7,.94); display: grid; place-items: center; padding: 56px 56px 40px; }
.lb[hidden] { display: none; }
.lb img { max-width: 100%; max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); object-fit: contain; }
.lb button { position: absolute; background: none; border: 0; color: #f3e9d6; cursor: pointer; font-size: 44px; line-height: 1; padding: 8px 14px; opacity: .8; }
.lb button:hover { opacity: 1; }
.lb-x { top: 8px; right: 8px; }
.lb-p { left: 4px; top: 50%; transform: translateY(-50%); }
.lb-n { right: 4px; top: 50%; transform: translateY(-50%); }
.lb.single .lb-p, .lb.single .lb-n { display: none; }

.stamp { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-14deg); border: 3px solid var(--red); color: var(--red);
         font: 700 26px var(--times); letter-spacing: .14em; padding: 2px 12px 0; background: rgba(255,255,255,.8); pointer-events: none; }
/* The same footer line on every page */
.site-foot { text-align: center; font-size: 11px; letter-spacing: .2em; opacity: .55; padding: 34px 20px 40px; margin: 0; }

.sample-note { font-size: 12px; font-style: italic; opacity: .55; }
.load-err { text-align: center; color: var(--red); }

@media (max-width: 640px) {
  .lb { padding: 56px 10px 30px; }
  .lb-p, .lb-n { top: auto !important; bottom: 4px; transform: none !important; }
  .back { top: 8px; left: 10px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }