/* Homepage only. Loaded after base.css, which holds the tokens and reset. */

body {
  background: var(--bg);
  overflow-x: hidden;
}

.whale-wrap {
  flex-shrink: 0;
  width: clamp(160px, 24vw, 320px);
  align-self: flex-end;
  pointer-events: none;
  opacity: 0;
  animation: fadeIn 1.2s ease forwards 1.8s;
  #float: right;
  right: 3vw;
  bottom: 0;
  #position: relative;
  position: absolute;
}

.whale-img {
  width: 100%;
  height: auto;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 8px rgba(79,195,161,0.2));
  background-color: transparent;
}

/* ── HERO ── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem 6rem;
  overflow: hidden;
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: 2rem;
}

@media (max-width: 700px) {
  .hero-inner {
    flex-direction: column;
    align-items: center;
  }
  .whale-wrap {
    width: clamp(120px, 50vw, 220px);
    align-self: center;
    position: relative;
    right: auto;
    bottom: auto;
  }
  .hero {
    padding: 2rem 1.5rem 3rem;
  }
  h1 {
    font-size: clamp(3rem, 18vw, 9rem);
  }        
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.45) 100%),
    url('nasa-upper-atmosphere-orig.png');
  background-size: cover;
  background-position: center top;
  z-index: 0;
}

.hero-content {
  flex: 0 1 800px;
  text-align: center;
}

/* Guide badge */
.guide-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.35em 1em;
  border-radius: 2px;
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: fadeUp 0.6s ease forwards 0.2s;
}

h1 {
  font-family: var(--display);
  font-size: clamp(4rem, 14vw, 9rem);
  font-weight: normal;
  letter-spacing: 0.07em;
  color: #fff;
  line-height: 1;
  text-shadow:
    0 0 40px rgba(79,195,161,0.3),
    0 0 80px rgba(79,195,161,0.1);
  opacity: 0;
  animation: fadeUp 0.7s ease forwards 0.5s;
}

.hero-sub {
  margin-top: 1.5rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: var(--accent2);
  opacity: 0;
  animation: fadeUp 0.7s ease forwards 0.8s;
}

.hero-desc {
  margin-top: 1.75rem;
  font-size: 1rem;
  color: rgba(232,228,216,0.75);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  animation: fadeUp 0.7s ease forwards 1.4s;
}

.hero-cta {
  margin-top: 3rem;
  opacity: 0;
  animation: fadeUp 0.7s ease forwards 1.7s;
}

.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bg);
  background: var(--accent);
  padding: 0.85em 2.2em;
  border-radius: 2px;
  transition: background 0.2s, transform 0.2s;
}

.btn:hover { background: #6dd4b5; transform: translateY(-2px); }

/* scroll chevron */
.scroll-hint {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  opacity: 0;
  animation: fadeIn 1s ease forwards 2s;
}
.scroll-hint span {
  display: block;
  width: 22px;
  height: 22px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  margin: -10px auto 0;
  animation: bounce 1.8s infinite;
}

/* ── SECTIONS ── */
section {
  max-width: 860px;
  margin: 0 auto;
  padding: 6rem 2rem;
}

section + section {
  border-top: 1px solid var(--border);
}

.section-label {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 0.08em;
  font-weight: normal;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2rem;
}

/* ── TOOLS ── */
/* The icons get the whale's treatment: screen blending drops their black
   outlines into the background, and the glow matches the whale's. Every icon
   is the same height, so their widths differ. */
.tools {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
  gap: 2.5rem 1.5rem;
}

.tools li,
.tools a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.tools a {
  color: var(--text);
  text-decoration: none;
}

.tools img {
  height: clamp(64px, 14vw, 130px);
  width: auto;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 8px rgba(79,195,161,0.2));
}

.tools span {
  font-size: 1rem;
}

.tools a:hover span { text-decoration: underline; }

/* ── GUIDE ENTRY (positioning) ── */
.guide-entry {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 2rem 2.5rem;
  border-radius: 2px;
  position: relative;
}

.guide-entry::before {
  content: 'The Hitchhikers Guide to the Galaxy, Entry #4,195,312';
  display: block;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--muted);
  letter-spacing: 0.07em;
  margin-bottom: 1.25rem;
}

.guide-entry p {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--text);
}

.guide-entry p + p { margin-top: 1em; }

.guide-entry.entry-alt::before {
  content: 'The Hitchhikers Guide to the Galaxy, Entry #4,195,313';
}

.guide-entry.entry-about {
  margin-top: 2.5rem;
}

.guide-entry.entry-about::before {
  content: 'The Hitchhikers Guide to the Galaxy, Entry #4,195,314';
}

.guide-entry.entry-about a {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.guide-entry p.pull-quote {
  font-family: var(--serif);
  font-weight: 700;
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--accent2);
  margin-bottom: 1.25rem;
}

/* ── SERVICES ── */
.services-grid {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  word-wrap: break-word;
  gap: 1.25rem;
  margin-top: 1rem;
}

@media (max-width: 600px) {
  .service-card {
    max-width: 340px;
    margin: 0 auto;
  }
}
.service-card {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 1.75rem;
  border-radius: 2px;
  transition: border-color 0.2s, transform 0.2s;
}

.service-card:hover {
  border-color: rgba(79,195,161,0.4);
  transform: translateY(-3px);
}

.service-card h3 {
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0em;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: 0.75rem;
}

.service-card p {
  font-size: 0.9rem;
  color: rgba(232,228,216,0.8);
  line-height: 1.65;
  font-style: italic;
  font-family: var(--serif);
}

/* ── ACCORDION ── */
.accordion-wrap {
  margin-top: 4rem;
  border-top: 1px solid var(--border);
  padding-top: 3rem;
}

.accordion-label {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
}

.accordion-item {
  border: 1px solid var(--border);
  border-radius: 2px;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.accordion-trigger {
  width: 100%;
  background: var(--panel);
  border: none;
  padding: 1.25rem 1.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s;
}

.accordion-trigger:hover {
  background: rgba(255,255,255,0.07);
}

.accordion-trigger h3 {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent2);
}

.accordion-chevron {
  width: 16px;
  height: 16px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 1rem;
}

.accordion-item.open .accordion-chevron {
  transform: rotate(-135deg);
}

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.accordion-inner {
  padding: 1.5rem 1.75rem 2rem;
  border-top: 1px solid var(--border);
}

.accordion-inner p {
  font-family: var(--serif);
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(232,228,216,0.85);
  margin-bottom: 1rem;
}

.accordion-inner p:last-child {
  margin-bottom: 0;
}

.accordion-inner strong {
  color: var(--accent2);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
    
/* ── CREDIBILITY ── */
.cred-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

@media (max-width: 600px) {
  .cred-block { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
}

.cred-block h3 {
  font-family: var(--mono);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.headshot {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  float: left;
  margin: 0.25rem 1.25rem 0.5rem 0;
  border: 2px solid var(--accent);
}

.cred-block p, .cred-block li {
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(232,228,216,0.85);
}

.cred-block ul {
  list-style: none;
  padding: 0;
}

.cred-block ul li::before {
  content: '— ';
  color: var(--accent);
  font-family: var(--display);
}

.cred-block ul li + li { margin-top: 0.4rem; }

/* ── CONTACT ── */
.contact-section {
  text-align: center;
}

.contact-section p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: rgba(232,228,216,0.8);
  max-width: 520px;
  margin: 0 auto 2.5rem;
}

.contact-title {
  font-family: var(--display);
  font-weight: normal;
  /* "CONTACT" in Modak with 0.05em tracking paints 4.6x the font-size wide
     (the glyphs overhang their advance widths), so this keeps it on one
     line inside the viewport less the 2rem section padding either side and
     a desktop scrollbar; caps at 9rem to match the hero h1. */
  font-size: clamp(2.5rem, calc(21vw - 20px), 9rem);
  letter-spacing: 0.05em;
}

.contact-email {
  display: inline-block;
  max-width: 100%;
  /* The <wbr /> after the @ is the intended break; this only catches a
     viewport too narrow for "cyberspaceroad.com" on a line of its own. */
  overflow-wrap: break-word;
  font-family: var(--display);
  /* Fits the address inside the viewport less the 2rem section padding
     either side; caps at 2.5rem once there is room for it. Below roughly
     335px the 1rem floor wins and the address wraps at the <wbr /> instead. */
  font-size: clamp(1rem, calc(5.8vw - 3.5px), 2.5rem);
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(79,195,161,0.4);
  padding-bottom: 2px;
  transition: border-color 0.2s;
}

.contact-email:hover { border-color: var(--accent); }

.social-logo {
  height: 1em;          
  width: auto;          
  vertical-align: baseline; 
}        

/* ── FOOTER ── */
footer {
  padding: 2.5rem 2rem;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes bounce {
  0%, 100% { transform: rotate(45deg) translateY(0); }
  50%       { transform: rotate(45deg) translateY(6px); }
}

/* The label and question name the destination, which the card copy on its
   own does not. */
.card-answer {
  display: block;
  margin-top: 1.25rem;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.card-answer-q {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--serif);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--accent);
}

/* A service card is a container holding its answer links. The first link is
   the one the card leads with. */
.card-answer-link {
  display: block;
  text-decoration: none;
}

.card-answer-link + .card-answer-link .card-answer { margin-top: 1rem; }

.card-answer-link:hover .card-answer-q { text-decoration: underline; }

/* ── ANSWERS INDEX ── */
/* Rows rather than cards, so the section does not repeat the services grid
   directly above it. The question mark is set in Modak, following the same
   use of the display face for the Background column's bullets. */
.entry-answers::before {
  content: 'The Hitchhikers Guide to the Galaxy, Entry #4,195,315';
}

.answer-index {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
}

.answer-index li + li {
  border-top: 1px solid var(--border);
}

.answer-index a {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 0 1rem;
  align-items: start;
  padding: 1.25rem 0.75rem;
  margin-left: -0.75rem;
  border-left: 2px solid transparent;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.answer-index a:hover {
  background: rgba(255,255,255,0.04);
  border-left-color: var(--accent);
}

.answer-index a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.answer-mark {
  font-family: var(--display);
  font-size: 2.25rem;
  line-height: 0.9;
  color: rgba(200,169,110,0.35);
  text-align: center;
  transition: color 0.2s ease, transform 0.2s ease;
}

.answer-index a:hover .answer-mark {
  color: var(--accent2);
  transform: translateY(-2px);
}

.answer-service {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: 0.35rem;
}

.answer-q {
  display: block;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
  transition: color 0.2s ease;
}

.answer-index a:hover .answer-q { color: var(--accent); }

.answer-sum {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(232,228,216,0.65);
}

@media (max-width: 600px) {
  .entry-answers { padding: 1.75rem 1.25rem; }
  .answer-index a { grid-template-columns: 1.9rem 1fr; gap: 0 0.75rem; }
  .answer-mark { font-size: 1.7rem; }
  .answer-q { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .answer-index a,
  .answer-mark,
  .answer-q { transition: none; }
  .answer-index a:hover .answer-mark { transform: none; }
}