/* A permanent Loris masthead, separate from the selected barber. */
.select-screen { --masthead-height: 132px; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--masthead-height);
  overflow: hidden;
  background: radial-gradient(ellipse at 94% 80%, #485052 0, #253039 25%, #11181e 62%);
}
.selection-arena { height: calc(100svh - var(--masthead-height)); min-height: 0; }
.brand-copy { position: relative; z-index: 2; display: flex; align-items: center; gap: 32px; }
.brand { display: block; text-decoration: none; }
.brand .brand-wordmark { width: 150px; }
.site-header h1 {
  font: 700 34px/1.05 "Barlow Condensed", Impact, sans-serif;
  letter-spacing: 0;
}
.loris-signature {
  position: absolute;
  right: clamp(20px, 4vw, 64px);
  top: 0;
  width: 206px;
  height: 100%;
  pointer-events: none;
  mask-image: linear-gradient(#000 0 86%, transparent 100%);
}
.loris-signature img { display: block; width: 206px; height: auto; max-width: none; }
.character-card[data-id="campi"] .card-portrait img { object-position: 50% 0; }
.confirmation-portrait img { object-position: 50% 0; }
/* Keep the original single-line composition; fit Campi to it, not the other way round. */
.select-screen {
  --location-type-size: clamp(88px, min(13.5vw, 26svh), 192px);
  --person-slot: 24px;
  --address-line: 24px;
  --mode-slot: 34px;
}
.location-panel {
  display: grid;
  grid-template-rows: auto auto;
  gap: 24px;
  align-self: center;
  padding: 0;
}
.location-title { min-height: 0; }
.location-panel h3,
.select-screen[data-character="campi"] .location-panel h3 {
  font-size: var(--location-type-size);
  line-height: .86;
  block-size: calc(var(--location-type-size) * .86);
  white-space: nowrap;
  margin: 8px 0 0;
}
.select-screen[data-character="campi"] .location-panel h3 {
  font-size: clamp(76px, min(9vw, 20svh), 164px);
}
.location-details {
  display: grid;
  grid-template-rows: var(--person-slot) calc(var(--address-line) * 2) var(--mode-slot);
  gap: 8px;
  block-size: calc(var(--person-slot) + var(--address-line) * 2 + var(--mode-slot) + 16px);
  padding: 0;
}
.location-person { margin: 0; line-height: 1; }
.location-address { line-height: var(--address-line); }
.booking-mode {
  align-self: start;
  justify-self: start;
  margin: 0;
  line-height: 1.4;
  block-size: var(--mode-slot);
}
.portrait-window { translate: none; transition: none; }
.character-card { border-width: 2px; transition: border-color .16s, background .16s; }
.character-card.is-selected { transform: none; }
.character-card .card-portrait img,
.character-card.is-selected .card-portrait img,
.character-card:hover .card-portrait img { transform: none; transition: none; }
.confirm-hint { line-height: 1.4; block-size: 2.8em; }
@media (max-width: 899px) {
  .select-screen {
    --masthead-height: 132px;
    --location-type-size: clamp(70px, 24vw, 136px);
    --person-slot: 27px;
    --address-line: 20.3px;
    --mode-slot: 42px;
  }
  .site-header { padding: 0 20px; }
  .brand-copy { display: block; width: 58%; }
  .brand .brand-wordmark { width: 122px; margin: -3px 0 2px; }
  .site-header h1 { max-width: 200px; font-size: 28px; }
  .loris-signature { right: 0; width: 180px; }
  .loris-signature img { width: 188px; margin-left: -4px; }
  .stage-heading { padding-top: 12px; padding-bottom: 8px; }
  .direction { top: 6px; }
  .confirmation-portrait { height: 180px; }
  .location-panel { display: contents; }
  .location-title { block-size: calc(var(--location-type-size) * .86 + 41px); }
  .location-panel h3,
  .select-screen[data-character="campi"] .location-panel h3 {
    font-size: var(--location-type-size);
    block-size: calc(var(--location-type-size) * .86);
    white-space: nowrap;
    margin: 6px 0 0;
  }
  .select-screen[data-character="campi"] .location-panel h3 {
    font-size: clamp(42px, 15.8vw, 90px);
  }
  .portrait-window {
    width: 66%;
    max-height: 400px;
    margin-right: -12px;
  }
  .hero-portrait { object-position: center bottom; }
}
@media (max-height: 700px) and (max-width: 899px) {
  .select-screen {
    --masthead-height: 112px;
    --location-type-size: clamp(58px, 19vw, 88px);
    --person-slot: 23px;
    --address-line: 17.4px;
    --mode-slot: 38px;
  }
  .brand .brand-wordmark { width: 108px; margin-top: -2px; }
  .site-header h1 { font-size: 25px; }
  .loris-signature { width: 166px; }
  .loris-signature img { width: 174px; }
  .location-title { block-size: calc(var(--location-type-size) * .86 + 33px); }
}
@media (max-width: 359px) {
  .site-header { padding-left: 16px; }
  .site-header h1 { max-width: 160px; font-size: 24px; }
  .loris-signature { right: -12px; }
}
@media (max-height: 540px) {
  .selection-arena { height: auto; min-height: 0; }
}
@media (min-height: 541px) and (max-height: 620px) and (max-width: 899px) {
  .select-screen {
    --masthead-height: 90px;
    --location-type-size: clamp(46px, 16vw, 68px);
    --person-slot: 20px;
    --address-line: 16px;
    --mode-slot: 36px;
  }
  .brand .brand-wordmark { width: 92px; }
  .site-header h1 { font-size: 21px; }
  .loris-signature { width: 146px; }
  .loris-signature img { width: 154px; }
  .stage-heading { padding-top: 8px; padding-bottom: 8px; }
  .stage-heading h2 { font-size: 18px; }
  .location-title {
    padding-top: 4px;
    padding-bottom: 6px;
    block-size: calc(var(--location-type-size) * .86 + 29px);
  }
  .location-person { font-size: 20px; }
  .location-address { font-size: 11px; }
  .booking-mode { font-size: 10px; }
  .character-card { height: 98px; }
  .card-portrait { flex-basis: 40px; }
  .card-info strong { font-size: 15px; }
  .card-info > span { font-size: 12px; }
  .input-hint { font-size: 10px; margin-bottom: 8px; }
  .confirm-block { padding-top: 8px; }
  .confirm-button { min-height: 44px; padding-top: 8px; padding-bottom: 8px; font-size: 15px; }
  .confirm-hint { font-size: 10px; }
}