/* gate.css
   Layered on top of normalize + skeleton from the 2021 site.
   Kept deliberately quiet. The interesting parts are behind the image.
*/

body {
  font-family: 'Source Sans Pro', 'Arial', sans-serif;
  font-size: 1.4em;
  font-weight: 400;
  color: #000;
}

h1 {
  font-family: 'Source Sans Pro', 'Arial', sans-serif;
  font-size: 2.6em;
  font-weight: 700;
  letter-spacing: .0001em;
  color: #000;
  margin-bottom: .25em;
}

h2 {
  font-family: 'Source Code Pro', 'Source Sans Pro', sans-serif;
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-weight: 400;
  color: #000;
}

h6 {
  font-family: 'Source Code Pro', 'Source Sans Pro', sans-serif;
  font-size: .8em;
}

a {
  font-family: 'Source Code Pro', 'Source Sans Pro', sans-serif;
  font-size: 1em;
  color: #939598;
  text-decoration: none;
  font-weight: 300;
}

.main { padding-top: 0; }
.row { padding: .35% 0; }

/* Wider container so the hero image actually fills the screen. */
.container { max-width: 1280px; }

/* Header with the JIM DOUGLAS mark. No floats — let the next row sit
   immediately underneath without a phantom empty bar. */
header.main_nav { padding: 1.5% 0 0; display: block; }
.logo { margin: 0; }
.logo a { display: inline-block; line-height: 0; }
.logo img { width: 84px; height: auto; display: block; }

img { max-width: 100%; }

/* Instruction line — sits right under the JIM DOUGLAS logo with a small gap. */
.instruction {
  font-family: 'Source Code Pro', 'Source Sans Pro', sans-serif;
  font-size: .85em;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #000;
  margin: 1.25em 0 .75em;
}

.friction-link {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: #939598;
  background: transparent;
  border: 0;
  padding: 0 .25em;
  cursor: pointer;
  text-decoration: underline dotted #cfcfcf;
  text-underline-offset: 4px;
  transition: color .2s ease;
}
.friction-link:hover,
.friction-link[aria-expanded="true"] { color: #000; }

/* The hidden-link panel — compact so it doesn't shove the image down */
.friction-panel {
  margin: 0 0 .85em;
  padding: .85em 1.1em;
  border-left: 2px solid #000;
  background: #fafafa;
  font-family: 'Source Code Pro', 'Source Sans Pro', sans-serif;
  font-size: .8em;
  line-height: 1.55;
  color: #333;
}
.friction-panel[hidden] { display: none; }
.friction-panel p { margin: 0 0 .55em; }
.friction-panel p:last-child { margin-bottom: 0; }
.friction-panel a { color: #000; text-decoration: underline; }
.friction-panel code,
.price-formula {
  font-family: 'IBM Plex Mono', 'Source Code Pro', monospace;
  font-size: .92em;
  background: #efefef;
  padding: 1px 6px;
  border-radius: 2px;
}
.agent-price-now {
  display: inline-block;
  margin-left: .25em;
  color: #000;
  font-weight: 400;
}

/* The image as the gate button */
.enter-image {
  position: relative;
  display: block;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.enter-image img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity .25s ease, filter .25s ease, transform .35s ease;
}
.enter-image:hover img {
  opacity: .92;
  filter: contrast(1.02) saturate(1.05);
  transform: scale(1.005);
}
.enter-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 1.25em;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.enter-image:hover .enter-overlay,
.enter-image:focus-visible .enter-overlay { opacity: 1; }
.enter-overlay-text {
  font-family: 'Source Code Pro', monospace;
  font-size: .75em;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, .55);
  padding: .35em .8em;
  border-radius: 2px;
  backdrop-filter: blur(2px);
}

/* In-flight + done states */
.enter-image.is-loading { cursor: progress; }
.enter-image.is-loading img { opacity: .6; filter: grayscale(.4); }
.enter-image.is-done img { filter: contrast(1.05); }

/* Result block */
.status {
  margin: 1.25em 0 0;
  padding: 1em 1.25em;
  font-family: 'IBM Plex Mono', 'Source Code Pro', monospace;
  font-size: .85em;
  line-height: 1.6;
  color: #000;
  background: #f5f5f5;
  border-left: 2px solid #000;
  word-break: break-all;
}
.status[hidden] { display: none; }
.status.is-error { border-left-color: #b00020; color: #b00020; }
.status code {
  font-family: inherit;
  background: #ececec;
  padding: 1px 4px;
  border-radius: 2px;
}
.status .tx-label {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: .75em;
  color: #707070;
  margin-right: .5em;
}
.status .tx-link { color: #000; text-decoration: underline; }

/* Footer */
footer { padding-top: 5%; padding-bottom: 5%; }
.footerleft { text-align: left; font-size: .8em; }
.footerright { text-align: right; font-size: .8em; }
.footer a { font-size: .8em; }

@media (max-width: 550px) {
  .logo img { max-width: 25%; }
  .row { padding: 0 0; }
  .row img { padding: 1% 0; }
  .footerleft, .footerright { text-align: left; margin-bottom: 0; }
  .instruction { font-size: .8em; }
}