/* ==================================================================
   CONTACT — same clean layout as the Skateboard page.
   Uses the shared pieces in css/skateboard.css (.sk-*), plus the
   few contact-only parts below.
   ================================================================== */

/* hero: dark band with blueprint lines instead of a film */
.ct-hero {
  height: auto;
  min-height: 0;
  padding: clamp(120px, 22vh, 240px) 0 clamp(28px, 6vh, 72px);
  background-color: #0F0F0F;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: calc((min(100vw, var(--sk-max)) - 2 * var(--gutter)) / 6) 100%;
  background-position: max(var(--gutter), calc((100vw - var(--sk-max)) / 2 + var(--gutter))) 0;
}
.ct-hero::after { display: none; }
.ct-hero .sk-hero__copy { position: static; }

/* live LA clock in the hero */
.ct-clock {
  position: absolute;
  right: max(var(--gutter), calc((100vw - var(--sk-max)) / 2 + var(--gutter)));
  bottom: clamp(28px, 6vh, 72px);
  text-align: right;
  color: rgba(255, 255, 255, 0.8);
}
.ct-clock time {
  display: block;
  font-family: var(--sk-tall);
  font-size: clamp(2.5rem, 1.6rem + 2.6vw, 4.5rem);
  line-height: 0.9;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* links inside the details strip */
.ct-link {
  text-decoration: underline;
  text-decoration-color: var(--sk-line);
  text-underline-offset: 4px;
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}
.ct-link:hover,
.ct-link:focus-visible { color: var(--sk-accent); text-decoration-color: currentColor; }

/* the big email line */
.ct-mail {
  display: block;
  padding: clamp(40px, 6vw, 80px) 0 clamp(8px, 1vw, 12px);
  font-family: var(--sk-tall);
  /* ~30 characters wide: scale with the screen so it fits on one line */
  font-size: min(9.5rem, calc((100vw - 2 * var(--gutter)) / 7.4));
  line-height: 0.9;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.ct-mail:hover,
.ct-mail:focus-visible { color: var(--sk-accent); }
.ct-mail__meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0 clamp(56px, 7vw, 96px);
  border-top: 1px solid var(--sk-ink);
}
.ct-mail__meta button {
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.ct-mail__meta button:hover { color: var(--sk-accent); }

/* services list — numbered rows */
.ct-list {
  margin: 0;
  padding: 0 0 clamp(56px, 7vw, 96px);
  list-style: none;
  border-top: 1px solid var(--sk-ink);
}
.ct-list li {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--sk-line);
}
.ct-list b {
  font-size: clamp(1.25rem, 1rem + 1vw, 2rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .ct-hero { padding-top: 96px; }
  .ct-clock { position: static; text-align: left; margin-top: 28px; padding: 0 var(--gutter); }
  .ct-list li { grid-template-columns: 36px minmax(0, 1fr); }
  .ct-list li .sk-mono:last-child { grid-column: 2; }
}

/* ------------------------------------------------------------------
   Same typefaces as the Work page: Inter, uppercase and spaced out,
   in place of Six Caps (layout unchanged). Labels stay DM Mono.
   ------------------------------------------------------------------ */
.ct-hero h1 {
  font-family: var(--font-sans);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);   /* the same size as the project page titles */
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: 0.12em;
}
.ct-clock time {
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 1rem + 1.2vw, 2.25rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.08em;
}
.ct-mail {
  font-family: var(--font-sans);
  font-size: min(4rem, calc((100vw - 2 * var(--gutter)) / 24));
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.06em;
}

/* ------------------------------------------------------------------
   Say hello back — click SAY HELLO: the drip logo rolls in on the right,
   waves its drips and says "Hi! Write me →" (js/contact.js)
   ------------------------------------------------------------------ */
.ct-hello {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.ct-hello:hover, .ct-hello:focus-visible { color: var(--sk-accent); }
.ct-drip {
  position: absolute;
  right: max(var(--gutter), calc((100vw - var(--sk-max)) / 2 + var(--gutter)));
  bottom: calc(clamp(28px, 6vh, 72px) + clamp(84px, 9vw, 110px));
  height: clamp(64px, 7vw, 96px);
  width: auto;
  overflow: visible;
  color: var(--sk-accent, #F15A23);
  fill: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;               /* fades out after "Write me" */
}
.ct-drip g { transform-box: fill-box; }
.ct-drip .dl-line path { fill: none; stroke: currentColor; stroke-linecap: round; }
.ct-hero.has-hi .ct-drip { opacity: 1; }
.ct-hero.is-hi .ct-drip .dl-l    { transform-origin: 50% 50%; animation: dl-roll 1s cubic-bezier(0.2, 0.8, 0.3, 1) calc((3 - var(--i)) * 90ms) both; }
.ct-hero.is-hi .ct-drip .dl-line { animation: dl-grow 0.35s cubic-bezier(0.5, 0, 0.75, 0) calc(1s + var(--i) * 140ms) both; }
.ct-hero.is-hi .ct-drip .dl-dot  { animation: dl-fall 0.8s linear calc(1s + var(--i) * 140ms) both; }
.ct-hero.is-hi .ct-drip .dl-drip   { animation: ct-wave 1.2s ease-in-out 1.6s 2; }
.ct-hero.is-wave .ct-drip .dl-drip { animation: ct-wave 1.2s ease-in-out 2; }
.ct-hero.is-wave .ct-drip .dl-l    { animation: ct-hop 0.6s ease-out calc(var(--i) * 70ms); }
@keyframes ct-wave { 25% { transform: rotate(30deg); } 75% { transform: rotate(-30deg); } }
@keyframes ct-hop { 40% { transform: translateY(-14%) scale(0.95, 1.06); } 70% { transform: scale(1.06, 0.95); } }
.ct-bubble {
  position: absolute;
  right: max(var(--gutter), calc((100vw - var(--sk-max)) / 2 + var(--gutter)));
  bottom: calc(clamp(28px, 6vh, 72px) + clamp(84px, 9vw, 110px) + clamp(64px, 7vw, 96px) + 14px);
  color: var(--sk-accent, #F15A23);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.ct-hero.has-hi .ct-bubble { opacity: 1; transform: none; pointer-events: auto; transition-delay: 1.4s; }
.ct-hero.is-wave .ct-bubble { transition-delay: 0s; }
.ct-bubble:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 640px) {
  .ct-drip { top: 18px; bottom: auto; right: var(--gutter); height: 50px; }
  .ct-bubble { top: 34px; bottom: auto; right: calc(var(--gutter) + 136px); }
}
@media (prefers-reduced-motion: reduce) {
  .ct-hero .ct-drip *, .ct-hero .ct-drip { animation: none !important; }
}

/* details strip: 3 across now that it has more items */
.ct-details { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .ct-details { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ct-details { grid-template-columns: minmax(0, 1fr); } }

/* the big email line flashes orange when "Write me" brings you here */
.ct-mail.is-flash { animation: ct-flash 1.6s ease 0.4s; }
@keyframes ct-flash { 0%, 100% { color: inherit; } 25%, 60% { color: var(--sk-accent); } }

/* ------------------------------------------------------------------
   CT-001 — easier to read, sized like the rest of the site:
   SAY HELLO matches the About headline (~38px, less spaced out), the
   subtitle and body text match the About text (15px, regular weight),
   labels stay 11px DM Mono like every page.
   ------------------------------------------------------------------ */
.ct-hero h1 { font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.4rem); letter-spacing: 0.06em; line-height: 1.15; }
.ct-hero .sk-hero__sub { font-size: 15px; font-weight: 400; line-height: 1.6; color: rgba(255, 255, 255, 0.85); margin-top: 10px; }
.ct-clock time { font-size: clamp(1.4rem, 1rem + 1vw, 1.9rem); letter-spacing: 0.04em; }
.ct-details dd { font-size: 15px; }
#write .sk-text__body p { font-size: 15px; font-weight: 400; line-height: 1.65; }