* {
  margin: 0;
  padding: 0;
}

/* anything marked hidden stays hidden, whatever display a later rule gives it
   (otherwise closed pop-ups sit invisibly over the page and swallow clicks) */
[hidden] {
  display: none !important;
}

html {
  background-color: rgb(10, 12, 20); /* dark behind everything so blurred section edges don't haze white */
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar {
  display: none;
}

/* Small screens get their own rhythm: keep the generous house style, while
   preventing wide decorative elements and side gutters from crowding content. */
@media (max-width: 700px) {
  /* Phones scroll freely, every page: no snapping (it hid headers on load, trapped long sections and
     felt grabby on touch) */
  body {
    overflow-x: clip;
  }

  html {
    overflow-x: clip;
  }

  input,
  select,
  textarea {
    font-size: 16px; /* prevents iOS from zooming into form fields */
  }

  button {
    min-height: 44px;
  }

  .footer-logo {
    gap: 8px;
    font-size: 22px;
  }

  .footer-logo img {
    width: 40px;
    height: 40px;
    padding: 6px;
  }

  .commission-top,
  .about-top {
    padding: max(16px, env(safe-area-inset-top)) 16px 16px;
  }

  /* the round logo alone, so the back link stays on one line beside it */
  .commission-top .footer-logo em {
    display: none;
  }

  .commission-back,
  .about-back {
    white-space: nowrap;
  }

  .commission-back,
  .about-back {
    font-size: 9px;
    letter-spacing: 0.14em;
    padding: 14px 0; /* a thumb-sized tap area without moving the text */
  }

  /* the showcase panel it opens doesn't exist on phones (home.css), and the tab sat over every page's
     text; Services is in the menu instead */
  .spotlight-tab,
  .spotlight-tab:hover {
    display: none;
  }
}

/* Close buttons say "Esc ✕" for keyboards; on touch screens there's no Esc key, so just the ✕, still a
   thumb-sized target */
@media (pointer: coarse) {
  .esc-key {
    display: none;
  }

  button:has(> .esc-key) {
    min-width: 44px;
    min-height: 44px;
    font-size: 14px;
  }
}

::selection {
  background-color: #f4a300;
  color: black;
}

button {
  background-color: #f4a300;
  color: #1a1a1a;
  padding: 12px 24px;
  border: none;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  transition: background-color 0.5s ease-in-out;
}

button:hover {
  cursor: pointer;
  background-color: #f5f0e1;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-family: "Cormorant Garamond", serif;
  font-size: 28px;
  color: #f5f0e1;
}

.footer-logo img {
  height: 48px;
  width: 48px;
  object-fit: contain;
  background-color: var(--logo-bg, white); /* Admin > Settings > Logo */
  border-radius: 55% 45% 45% 55% / 45% 55% 45% 55%;
  padding: 8px;
}

/* --- COMMISSION PAGE (commission.html) --- one quiet page for commissions, fittings and questions */
.commission-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
}

.commission-back {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #f5f0e1;
  text-decoration: none;
  transition: color 0.3s ease;
}

.commission-back:hover {
  color: #f4a300;
}

.commission-top {
  animation: enter-drop 0.8s cubic-bezier(0.19, 1, 0.22, 1) both;
}

@keyframes slow-zoom {
  0% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

/* Commission page entrance: header drops in, heading lines rise from behind a mask,
   then the intro, steps, map and form fields cascade in */
@keyframes enter-rise {
  from {
    opacity: 0;
    translate: 0 24px;
  }
}

@keyframes enter-drop {
  from {
    opacity: 0;
    translate: 0 -16px;
  }
}

/* browser autofill paints fields white; on the site's dark forms keep them dark with light text */
:is(.wall-card, .review-write, .login-form, .commission-form, .consent-card, .admin-page)
  input:is(:-webkit-autofill, :autofill) {
  -webkit-text-fill-color: #f5f0e1;
  caret-color: #f5f0e1;
  box-shadow: 0 0 0 100px #12141d inset;
  transition: background-color 99999s ease 0s; /* stops Chrome flashing its own colour back in */
}

/* The needle cursor (js/cursor.js): the normal cursor is hidden while it's on, except in text fields */
html.needle-cursor,
html.needle-cursor * {
  cursor: none !important;
}

html.needle-cursor
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, [contenteditable]) {
  cursor: text !important;
}

.needle-layer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.needle-layer.is-hidden,
.needle-layer.is-away,
.needle-layer.is-text {
  opacity: 0;
}

.needle-thread {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.needle-thread path {
  fill: none;
  stroke: #f4a300;
  stroke-width: 1.6;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}

.needle {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  transform-origin: 0 0; /* turns around its tip */
  filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.5));
  will-change: transform;
}

/* a press: the needle dips in */
.needle-layer.is-pressing .needle path {
  transform: scale(0.88);
  transform-origin: 0 0;
}

/* The "What we make" tab (js/showcase-tab.js), on every page: every few seconds it is tugged nearly out, then springs back */
.spotlight-tab,
.spotlight-tab:hover {
  position: fixed;
  right: 0;
  top: calc(50% - 124px); /* its bottom sits just above the scroll dots (200px tall, centred) */
  z-index: 15;
  padding: 18px 10px;
  border-radius: 12px 0 0 12px;
  background: #f4a300;
  color: #1a1a1a;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  translate: 100% -100%;
  transition:
    translate 0.5s cubic-bezier(0.34, 1.4, 0.64, 1),
    padding 0.3s ease;
}

.spotlight-tab.is-on {
  translate: 0 -100%;
}

.spotlight-tab:hover {
  padding-right: 16px;
}

.spotlight-tab span {
  display: block;
  writing-mode: vertical-rl;
  rotate: 180deg;
}

.spotlight-tab.is-on:not(:hover) {
  animation: tab-tug 7s cubic-bezier(0.34, 1.56, 0.64, 1) 2s infinite;
}

@keyframes tab-tug {
  0%,
  78%,
  100% {
    translate: 0 -100%;
  }
  84% {
    translate: -22px -100%; /* pulled... */
  }
  87% {
    translate: -26px -100%;
  }
  93% {
    translate: 4px -100%; /* ...let go: snaps back past, then settles */
  }
}

.spotlight-tab {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}