/* Robot Futures. Colours and type scale follow the Squarespace site this replaces
   (theme tokens in its site.css); Orpheus Pro, an Adobe font, is replaced by Libre Caslon Display. */

@font-face {
  font-family: 'Inter Tight';
  src: url(/fonts/InterTight.woff2) format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Tight';
  src: url(/fonts/InterTight-Italic.woff2) format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Caslon Display';
  src: url(/fonts/LibreCaslonDisplay.woff2) format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --accent: #ff6a1a;      /* hsl(17.8, 100%, 55.1%) */
  --dark: #282828;        /* darkAccent */
  --light: #d9d8d8;       /* lightAccent */
  --white: #ffffff;
  --black: #000000;
  --heading: 'Libre Caslon Display', Georgia, 'Times New Roman', serif;
  --body: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --gutter: max(24px, 4vw);
  --content: 1102px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--body);
  font-size: 1.1rem;
  line-height: 1.84;
}
img { display: block; max-width: 100%; height: auto; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 {
  margin: 0 0 0.6em;
  font-family: var(--heading);
  font-weight: 400;
  line-height: 1.2;
}
h2 { font-size: clamp(2.6rem, 5.2vw, 4.6rem); }
h3 { font-size: clamp(2.1rem, 3.4vw, 3rem); }
h4 { font-size: clamp(1.45rem, 2vw, 1.75rem); line-height: 1.35; }
a { color: var(--accent); text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

.wrap { width: min(var(--content), 100% - 2 * var(--gutter)); margin-inline: auto; }
.center { text-align: center; }
section { padding-block: clamp(56px, 8vw, 110px); }
.light { background: var(--light); }
.dark { background: var(--dark); color: var(--white); }

/* Header */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 36px var(--gutter);
}
.site-title { font-family: var(--heading); font-size: 2.1rem; color: var(--black); text-decoration: none; }
.site-nav a { color: var(--black); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 6px; }

/* Hero */
.hero {
  display: grid;
  place-items: center;
  min-height: clamp(320px, 30vw, 440px);
  padding: 48px var(--gutter);
  background: #4b4436 url(/img/dune-2400.webp) 48% 34% / cover no-repeat;
  color: var(--white);
  text-align: center;
}
@media (max-width: 800px) { .hero { background-image: url(/img/dune-1200.webp); } }
.hero h1 {
  max-width: 12.5em;
  margin: 0;
  font-size: clamp(2.2rem, 5.4vw, 5rem);
  line-height: 1.18;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 2px 28px rgba(0, 0, 0, 0.3);
}

/* Two columns: main text and a narrow aside */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px 64px; }
.split > aside { padding-top: 0.6em; }
.contact-card { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 12px; }
.contact-card strong { font-weight: 700; }
.contact-card .portrait { grid-column: 1 / -1; justify-self: center; margin-top: 28px; }
.linkedin { color: var(--black); }
.linkedin svg { width: 22px; height: 22px; display: block; }
.portrait { width: 240px; aspect-ratio: 1; border-radius: 50%; background: #e4e3e3; overflow: hidden; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.experience h3 { text-align: center; }
.ai { padding-top: 0; }
.intro { padding-top: clamp(40px, 4vw, 56px); }

/* Testimonials: two quotes staggered across a 12-column grid */
.quotes .wrap { width: min(1224px, 100% - 2 * var(--gutter)); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 72px; }
.quotes blockquote { margin: 0; grid-column: 1 / 8; }
.quotes blockquote:nth-child(2) { grid-column: 6 / 13; }
.quotes .q { font-family: var(--heading); font-size: clamp(1.45rem, 2vw, 1.75rem); line-height: 1.35; color: var(--accent); margin: 0 0 1em; }
.quotes footer { margin-left: 40px; font-weight: 700; font-style: italic; font-size: 1rem; }

/* What do you need */
.needs { padding-top: 0; }
.wave { display: block; width: 100%; height: clamp(40px, 6vw, 90px); margin-bottom: clamp(40px, 5vw, 72px); }
.needs h2 { text-align: center; margin-bottom: 1.1em; }
.need { display: grid; grid-template-columns: 5fr 7fr; gap: 24px 48px; border-top: 1px solid var(--white); padding: 28px 0 64px; }
.need h4 { margin: 0.25em 0 0; }

/* Engagements: a light panel inset into the dark band */
.engagements-band { background: var(--dark); padding: 0 var(--gutter) var(--gutter); }
.engagements { background: var(--light); padding-inline: var(--gutter); }
.engagements h2 { text-align: center; margin-bottom: 1.2em; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 72px 28px; width: min(1210px, 100%); margin-inline: auto; }
.grid3 h4 { margin-bottom: 1em; }

/* Get in touch */
.touch { text-align: center; background: var(--black); color: var(--white); padding-block: clamp(36px, 4vw, 56px); }
.touch h3 { color: var(--accent); margin-bottom: 0.2em; }
.touch p { margin: 0; }
.touch a { font-weight: 700; font-style: italic; font-size: 1.25rem; }

.mark { padding: clamp(40px, 5vw, 64px) var(--gutter); }
.mark img { width: clamp(180px, 20vw, 260px); margin-inline: auto; }

/* Footer */
.site-footer { background: var(--dark); color: var(--white); padding: 56px var(--gutter) 48px; font-size: 1rem; line-height: 1.8; }
.site-footer .name { font-family: var(--heading); font-size: 1.9rem; margin: 0 0 0.7em; }
.site-footer .cols { display: flex; flex-wrap: wrap; gap: 8px 120px; }
.site-footer p { margin: 0; }

@media (max-width: 900px) {
  .split, .need { grid-template-columns: 1fr; }
  .quotes blockquote, .quotes blockquote:nth-child(2) { grid-column: 1 / -1; }
  .portrait { width: 200px; }
  .grid3 { grid-template-columns: 1fr; gap: 40px; }
  .need { padding-bottom: 40px; }
  .site-header { padding-block: 24px; }
  .site-title { font-size: 1.6rem; }
}