/* ==========================================================================
   Personal site (/) — the annotated notebook
   ========================================================================== */

/* Hero -------------------------------------------------------------------- */

.hero {
  padding-block: clamp(2.5rem, 1rem + 5vw, 6rem) var(--section-y);
  overflow-x: clip;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  align-items: center;
  gap: clamp(var(--space-7), 5vw, var(--space-9));
}

.hero__hello {
  font-size: 1.6rem;
  margin-bottom: var(--space-3);
  transform: rotate(-3deg);
  transform-origin: left;
  display: inline-block;
}

.hero__title {
  font-size: clamp(2.6rem, 1.3rem + 4.6vw, 5.4rem);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: -0.04em;
  font-variation-settings: "opsz" 96;
}

.hero__lede {
  margin-top: var(--space-6);
  max-width: 34ch;
  font-size: var(--text-lg);
  color: var(--ink-soft);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.hero__photo {
  position: relative;
  justify-self: center;
  width: min(100%, 420px);
}

.photo {
  position: relative;
  padding: 12px 12px 14px;
  background: #fff;
  box-shadow: var(--shadow-lift);
  transform: rotate(2.5deg);
  transition: transform var(--dur-slow) var(--ease-out);
}

.photo::before {
  /* the lavender sheet the photo is taped onto */
  content: "";
  position: absolute;
  inset: 8% -9% -7% 10%;
  z-index: -1;
  background: var(--lavender);
  border-radius: var(--radius-sm);
  transform: rotate(-6deg);
}

.hero__photo:hover .photo {
  transform: rotate(0.5deg) translateY(-4px);
}

.photo img {
  width: 100%;
  aspect-ratio: 900 / 1201;
  object-fit: cover;
  background: var(--stone);
}

.photo__tape {
  position: absolute;
  z-index: 2;
  width: 96px;
  height: 28px;
  background: rgb(232 230 226 / 0.82);
  box-shadow: 0 1px 2px rgb(25 25 25 / 0.08);
}

.photo__tape--a {
  top: -12px;
  left: 18%;
  transform: rotate(-8deg);
}

.photo__tape--b {
  bottom: -10px;
  right: 10%;
  transform: rotate(6deg);
}

.hero__caption {
  position: absolute;
  left: -2rem;
  bottom: -4.25rem;
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
}

.hero__caption .note {
  order: 2;
  transform: rotate(-4deg);
}

.hero__arrow {
  width: 56px;
  height: 44px;
  margin-bottom: 1.4rem;
  transform: rotate(-10deg);
}

@media (max-width: 860px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }

  .hero__photo {
    width: min(72%, 340px);
    margin-top: var(--space-5);
    margin-bottom: var(--space-6);
  }

  .hero__caption {
    left: auto;
    right: -1rem;
    bottom: -3.25rem;
  }

  .hero__arrow {
    display: none;
  }
}

/* Introduction ------------------------------------------------------------ */

.intro {
  border-top: 1px solid var(--stone);
}

.intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(var(--space-7), 6vw, var(--space-10));
  align-items: start;
}

.intro__title {
  font-size: var(--text-3xl);
  line-height: 1.05;
  letter-spacing: -0.035em;
  position: sticky;
  top: 7rem;
}

.intro__body {
  display: grid;
  gap: var(--space-5);
  font-size: var(--text-lg);
  max-width: var(--measure);
}

.intro__body a {
  text-decoration-color: var(--purple);
  text-decoration-thickness: 2px;
}

.ledger {
  margin-top: var(--space-5);
  border-top: 1.5px solid var(--ink);
  font-size: var(--text-sm);
}

.ledger__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--stone);
}

.ledger dt {
  color: var(--ink-soft);
}

.ledger dd {
  font-weight: 600;
  text-align: right;
}

@media (max-width: 860px) {
  .intro__grid {
    grid-template-columns: 1fr;
  }

  .intro__title {
    position: static;
  }
}

/* What I'm exploring: a pinboard, not a card grid ------------------------- */

.explore {
  background: var(--paper-deep);
}

.explore__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-5);
  margin-bottom: var(--space-8);
}

.explore__title {
  font-size: var(--text-3xl);
  letter-spacing: -0.035em;
}

.explore__aside {
  transform: rotate(-2deg);
}

.board {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
}

.pin {
  --tilt: 0deg;
  border-radius: var(--radius-lg);
  transform: rotate(var(--tilt));
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.js .pin[data-reveal] {
  transform: translateY(18px) rotate(var(--tilt));
}

.js .pin[data-reveal].is-in {
  transform: rotate(var(--tilt));
}

.pin:hover,
.js .pin[data-reveal].is-in:hover {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: var(--shadow-lift);
}

.pin:nth-child(1) { grid-column: 1 / span 5; --tilt: -1.2deg; }
.pin:nth-child(2) { grid-column: 6 / span 7; --tilt: 0.8deg; margin-top: var(--space-7); }
.pin:nth-child(3) { grid-column: 2 / span 6; --tilt: 1deg; margin-top: calc(var(--space-5) * -1); }
.pin:nth-child(4) { grid-column: 8 / span 5; --tilt: -1.5deg; margin-top: var(--space-4); }

.pin__link {
  display: grid;
  gap: var(--space-3);
  height: 100%;
  padding: clamp(var(--space-5), 3vw, var(--space-7));
  text-decoration: none;
  border-radius: inherit;
}

.pin__doodle {
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-3);
}

.pin h3 {
  font-size: var(--text-2xl);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.pin p {
  max-width: 40ch;
}

.pin__go {
  margin-top: var(--space-3);
  font-weight: 600;
  font-size: var(--text-sm);
}

.pin--paper {
  background: var(--paper);
  box-shadow: var(--shadow);
}

.pin--paper p {
  color: var(--ink-soft);
}

.pin--ink {
  background: var(--ink);
  color: var(--paper);
}

.pin--ink .pin__doodle {
  color: var(--lavender);
}

.pin--ink p {
  color: #CFCAC3;
}

.pin--lavender {
  background: var(--lavender);
}

.pin--lavender .pin__doodle {
  color: var(--ink);
}

.pin--line {
  border: 1.5px dashed var(--ink);
}

.pin--line p {
  color: var(--ink-soft);
}

@media (max-width: 760px) {
  .board {
    grid-template-columns: 1fr;
  }

  .pin:nth-child(n) {
    grid-column: 1;
    margin-top: 0;
  }
}

/* Projects: an index of real things --------------------------------------- */

.projects__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-3) var(--space-6);
  margin-bottom: var(--space-7);
}

.projects__head h2 {
  font-size: var(--text-3xl);
  letter-spacing: -0.035em;
}

.projects__head p {
  color: var(--ink-soft);
  max-width: 36ch;
}

.project-list {
  border-top: 1.5px solid var(--ink);
}

.project {
  border-bottom: 1px solid var(--stone);
}

.project__link {
  position: relative;
  display: grid;
  grid-template-columns: 8rem minmax(0, 4fr) minmax(0, 5fr) 2rem;
  align-items: baseline;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-3);
  text-decoration: none;
  isolation: isolate;
}

.project__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--lavender-soft);
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--dur) var(--ease-out);
}

.project__link:hover::before,
.project__link:focus-visible::before {
  clip-path: inset(0 0 0 0);
}

.project__tag {
  font-family: var(--font-hand);
  font-size: 1.2rem;
  color: var(--purple);
}

.project__name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.project__desc {
  color: var(--ink-soft);
}

.project__arrow {
  justify-self: end;
  font-size: var(--text-xl);
  transition: transform var(--dur-fast) var(--ease-out);
}

.project__link:hover .project__arrow {
  transform: translate(3px, -3px);
}

@media (max-width: 760px) {
  .project__link {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2) var(--space-4);
    padding-inline: 0;
  }

  .project__tag {
    grid-column: 1 / -1;
  }

  .project__desc {
    grid-column: 1;
  }

  .project__arrow {
    grid-row: 2;
    grid-column: 2;
  }
}

/* Writing ----------------------------------------------------------------- */

.writing {
  padding-top: var(--space-6);
}

.writing__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(var(--space-7), 6vw, var(--space-10));
  align-items: start;
}

.writing__head {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}

.writing__head h2 {
  font-size: var(--text-3xl);
  letter-spacing: -0.035em;
}

.writing__head p {
  color: var(--ink-soft);
  max-width: 34ch;
  margin-bottom: var(--space-3);
}

.post-list {
  border-top: 1.5px solid var(--ink);
}

.post {
  border-bottom: 1px solid var(--stone);
}

.post__link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-5);
  padding-block: var(--space-5);
  text-decoration: none;
}

.post__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  background-image: linear-gradient(var(--lavender), var(--lavender));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 0% 0.38em;
  transition: background-size var(--dur) var(--ease-out);
}

.post__link:hover .post__title,
.post__link:focus-visible .post__title {
  background-size: 100% 0.38em;
}

.post__date {
  flex-shrink: 0;
  font-size: var(--text-sm);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
  .writing__grid {
    grid-template-columns: 1fr;
  }

  .post__link {
    flex-direction: column;
    gap: var(--space-1);
  }
}

/* The door to the Studio -------------------------------------------------- */

.studio-door {
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--section-y);
  overflow: hidden;
}

.studio-door__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(var(--space-7), 6vw, var(--space-10));
  align-items: center;
}

.studio-door__note {
  color: var(--lavender);
  transform: rotate(-3deg);
  display: inline-block;
  margin-bottom: var(--space-3);
}

.studio-door h2 {
  font-size: var(--text-3xl);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.studio-door__em {
  color: var(--lavender);
  position: relative;
  white-space: nowrap;
}

.studio-door__em::after {
  /* hand-drawn underline */
  content: "";
  position: absolute;
  left: -2%;
  right: 4%;
  bottom: -0.12em;
  height: 0.22em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9c40-6 98-8 194-3' fill='none' stroke='%23C9B5F5' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.studio-door__copy > p:not(.note) {
  margin-block: var(--space-5) var(--space-6);
  max-width: 46ch;
  font-size: var(--text-lg);
  color: #D9D4CC;
}

/* A three-frame storyboard: product -> angle -> people */
.reel {
  display: grid;
  gap: var(--space-4);
  padding: 0;
  list-style: none;
  counter-reset: frame;
}

.reel__frame {
  position: relative;
  display: grid;
  align-content: center;
  gap: var(--space-2);
  min-height: 7.5rem;
  padding: var(--space-5);
  border: 1.5px solid rgb(248 247 244 / 0.22);
  border-radius: var(--radius-lg);
  counter-increment: frame;
}

.reel__frame:nth-child(1) { transform: translateX(-4%) rotate(-1.5deg); }
.reel__frame:nth-child(2) { transform: translateX(6%) rotate(1deg); background: rgb(201 181 245 / 0.1); border-color: rgb(201 181 245 / 0.45); }
.reel__frame:nth-child(3) { transform: translateX(-1%) rotate(-0.5deg); background: var(--lavender); color: var(--ink); border-color: var(--lavender); }

.reel__label {
  font-family: var(--font-hand);
  font-size: 1.15rem;
  color: var(--lavender);
}

.reel__label::before {
  content: counter(frame) ". ";
}

.reel__frame--play .reel__label {
  color: var(--purple-deep);
}

.reel__code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: #E6E1D8;
}

.reel__code span {
  color: var(--lavender);
}

.reel__hook {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.reel__play {
  position: absolute;
  right: var(--space-5);
  top: 50%;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--ink);
  translate: 0 -50%;
}

.reel__play::after {
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  border-style: solid;
  border-width: 0.5rem 0 0.5rem 0.8rem;
  border-color: transparent transparent transparent var(--lavender);
  translate: -50% -50%;
}

.reel__comment {
  justify-self: start;
  padding: 0.35em 0.8em;
  border-radius: var(--radius-pill) var(--radius-pill) var(--radius-pill) 4px;
  background: var(--paper);
  font-size: var(--text-sm);
  font-weight: 600;
}

@media (max-width: 860px) {
  .studio-door__grid {
    grid-template-columns: 1fr;
  }

  .reel__frame:nth-child(n) {
    transform: none;
  }
}