/* gasallsoftware.com — one stylesheet, no build step.
   Palette is lifted from the caricature: gold from the hair, slate from the
   hoodie, a cool lake-mist ground. */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/fonts/bricolage-grotesque.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif-4.woff2') format('woff2');
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif-4-italic.woff2') format('woff2');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --ground: #e8eef1;
  --ink: #16222c;
  --slate: #4f5e6a;
  --gold: #c8962f;
  --gold-ink: #8a6419;
  --rule: #c5d1d8;
  --focus: #1f6fb2;

  --display: 'Bricolage Grotesque', 'Avenir Next', 'Segoe UI', sans-serif;
  --text: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  --measure: 36rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #111a21;
    --ink: #e3ebf0;
    --slate: #9dadb9;
    --gold: #e0b14f;
    --gold-ink: #e7c171;
    --rule: #2a3843;
    --focus: #7cb8ee;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.125rem;
  line-height: 1.6;
  font-optical-sizing: auto;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.2em;
}
a:hover {
  color: var(--gold-ink);
}
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -999px;
}
.skip:focus {
  left: var(--gutter);
  top: 0.5rem;
  background: var(--ground);
  padding: 0.25rem 0.5rem;
}

/* Site header: name on the left, two links on the right. */
.masthead {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  align-items: baseline;
  max-width: 68rem;
  margin: 0 auto;
  padding: 1.25rem var(--gutter);
  font-family: var(--display);
  font-size: 1rem;
}
.masthead .home {
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.masthead nav {
  display: flex;
  gap: 1.25rem;
}
.masthead nav a[aria-current='page'] {
  text-decoration-thickness: 0.2em;
}

main {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 var(--gutter) 4rem;
}

/* ---------- Home ---------- */

.hello {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4rem);
  min-height: min(78vh, 44rem);
}

.hello h1 {
  margin: 0 0 1.5rem;
  font-family: var(--display);
  font-size: clamp(3.25rem, 11vw, 7.5rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.045em;
}

.hello p {
  max-width: var(--measure);
  margin: 0 0 1rem;
}

.hello .aside {
  color: var(--slate);
  font-style: italic;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-top: 2rem;
  font-family: var(--display);
  font-weight: 600;
}
.actions .primary {
  display: inline-block;
  padding: 0.7rem 1.3rem;
  background: var(--ink);
  color: var(--ground);
  border-radius: 999px;
  text-decoration: none;
}
.actions .primary:hover {
  background: var(--gold-ink);
  color: var(--ground);
}
.actions .secondary {
  align-self: center;
}

/* The one bold move: a gold sun for the caricature to wave from. The figure
   is the sun; the image is taller than it, so the hair rises above the rim
   while the bottom is masked to the circle. Sizes are in cqw (the figure's
   width) so the mask tracks the circle at every size. */
.portrait {
  position: relative;
  margin: 3rem 0 0;
  justify-self: center;
  width: min(100%, 26rem);
  aspect-ratio: 1;
  container-type: inline-size;
}
.portrait::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--gold);
}
.portrait img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100cqw;
  height: 112cqw;
  max-width: none;
  object-fit: contain;
  object-position: 50% 100%;
  transform-origin: 50% 100%;
  animation: wave 1.6s ease-in-out 0.4s 1 both;
  --mask: linear-gradient(#000, #000) 0 0 / 100% 62cqw no-repeat,
    radial-gradient(circle 50cqw at 50% 62cqw, #000 99.5%, transparent 100%) 0 0 / 100% 100% no-repeat;
  -webkit-mask: var(--mask);
  mask: var(--mask);
}

@keyframes wave {
  0%,
  100% {
    transform: rotate(0);
  }
  20% {
    transform: rotate(-4deg);
  }
  40% {
    transform: rotate(3deg);
  }
  60% {
    transform: rotate(-3deg);
  }
  80% {
    transform: rotate(1.5deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .portrait img {
    animation: none;
  }
}

@media (max-width: 46rem) {
  .hello {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-top: 1rem;
  }
  .portrait {
    order: -1;
    width: min(70%, 18rem);
  }
}

/* ---------- Resume ---------- */

.resume-head {
  padding: 2.5rem 0 2rem;
  border-bottom: 2px solid var(--ink);
}
.resume-head h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.5rem, 7vw, 4.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
}
.resume-head .role-line {
  margin: 0.5rem 0 0;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--slate);
}
.resume-head .where {
  margin: 0.25rem 0 0;
  color: var(--slate);
}
.summary {
  max-width: 44rem;
  margin: 1.5rem 0 0;
  font-size: 1.2rem;
}

.resume-section {
  padding-top: 2.5rem;
}
.resume-section > h2 {
  margin: 0 0 1.25rem;
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* An employer, with its roles as a timeline down the right-hand column. */
.employer {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 0 2rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.employer .org {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.3;
}
.employer .org span {
  display: block;
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--slate);
}

.roles {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.role {
  position: relative;
  padding-left: 1.5rem;
  padding-bottom: 1.5rem;
}
.role:last-child {
  padding-bottom: 0;
}
/* The rail and its stops: several roles at one employer read as a climb. */
.role::before {
  content: '';
  position: absolute;
  left: 0.3rem;
  top: 0.75rem;
  bottom: -0.5rem;
  width: 2px;
  background: var(--rule);
}
.role:last-child::before {
  display: none;
}
.role::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--ground);
  border: 2px solid var(--gold);
}
.role:first-child::after {
  background: var(--gold);
}

.role h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.role .dates {
  margin: 0.1rem 0 0.5rem;
  font-family: var(--display);
  font-size: 0.95rem;
  color: var(--slate);
  font-variant-numeric: tabular-nums;
}
.role ul {
  margin: 0;
  padding-left: 1.1rem;
  max-width: 44rem;
}
.role li {
  margin-bottom: 0.35rem;
}
.role li::marker {
  color: var(--gold);
}

.pairs {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 0.75rem 2rem;
  margin: 0;
}
.pairs dt {
  font-family: var(--display);
  font-weight: 700;
}
.pairs dd {
  margin: 0;
  max-width: 44rem;
}

.plain {
  margin: 0;
  padding-left: 1.1rem;
}
.plain li::marker {
  color: var(--gold);
}

@media (max-width: 46rem) {
  .employer,
  .pairs {
    grid-template-columns: 1fr;
  }
  .employer .org {
    margin-bottom: 1rem;
  }
  .roles {
    grid-column: 1;
    grid-row: auto;
  }
}

.site-foot {
  max-width: 68rem;
  margin: 0 auto;
  padding: 2rem var(--gutter) 3rem;
  font-family: var(--display);
  font-size: 0.9rem;
  color: var(--slate);
}

/* ---------- 404 ---------- */

.lost {
  padding: 4rem 0;
  max-width: var(--measure);
}
.lost h1 {
  font-family: var(--display);
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0 0 1rem;
}

/* ---------- Print: the resume becomes a clean paper resume. ---------- */

@media print {
  :root {
    --ground: #fff;
    --ink: #000;
    --slate: #333;
    --rule: #bbb;
  }
  body {
    font-size: 10.5pt;
    line-height: 1.4;
  }
  .masthead,
  .site-foot,
  .skip {
    display: none;
  }
  main {
    max-width: none;
    padding: 0;
  }
  .resume-head {
    padding-top: 0;
  }
  .resume-head .where::after {
    content: ', linkedin.com/in/toddgasall';
  }
  .employer {
    break-inside: avoid-page;
  }
  .role {
    break-inside: avoid;
  }
  a {
    text-decoration: none;
  }
}