/* =========================================================
   TOKENS: change colours and fonts here and the whole site updates
   ========================================================= */
:root {
  --cobalt: #2B35F5;     /* the anchor colour */
  --paper:  #FCFCFF;
  --tint:   #EDEEFF;     /* very light cobalt, for the CV band */
  --ink:    #17162B;
  --pink:   #FF8FD0;
  --sky:    #3DC2FF;
  --butter: #FFE94D;
  --mint:   #2EC27E;
  --violet: #9B3DDB;
  --muted:  #4A52C9;

  --font-hand: "Space Mono", ui-monospace, Menlo, monospace;
  --font-body: "Space Mono", ui-monospace, Menlo, monospace;

  --gutter: clamp(.75rem, 2.5vw, 2rem);

  /* The zig-zag outline used by the sticker buttons */
  --d-oval: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='-5%20-5%20210%20110'%20preserveAspectRatio='none'%3E%3Cg%20fill='none'%20stroke='black'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M13.3%2017.0%20C14.9%2016.1,%2019.1%2013.5,%2023.0%2011.8%20C26.9%2010.0,%2031.7%207.4,%2036.8%206.5%20C41.9%205.6,%2045.0%206.8,%2053.5%206.3%20C62.0%205.8,%2073.0%203.9,%2087.8%203.6%20C102.6%203.4,%20130.0%204.2,%20142.4%204.7%20C154.8%205.2,%20156.6%205.9,%20162.2%206.6%20C167.8%207.3,%20172.1%207.5,%20176.1%209.1%20C180.2%2010.6,%20183.8%2013.8,%20186.7%2016.0%20C189.6%2018.3,%20191.7%2020.2,%20193.6%2022.6%20C195.5%2025.0,%20197.2%2024.6,%20198.2%2030.7%20C199.2%2036.7,%20199.9%2052.2,%20199.6%2059.0%20C199.3%2065.8,%20197.5%2067.9,%20196.4%2071.7%20C195.3%2075.4,%20195.0%2078.7,%20193.0%2081.6%20C191.0%2084.5,%20187.7%2087.0,%20184.3%2089.0%20C180.9%2091.0,%20177.3%2092.5,%20172.4%2093.7%20C167.5%2094.9,%20162.0%2095.6,%20154.9%2096.4%20C147.8%2097.1,%20144.0%2098.4,%20129.9%2098.3%20C115.7%2098.2,%2084.5%2096.6,%2070.0%2096.1%20C55.4%2095.5,%2049.7%2095.6,%2042.8%2095.0%20C35.8%2094.5,%2032.8%2094.0,%2028.1%2092.8%20C23.5%2091.6,%2018.5%2089.8,%2014.8%2088.0%20C11.0%2086.1,%208.1%2084.3,%205.6%2081.9%20C3.1%2079.5,%200.9%2077.3,%20-0.4%2073.6%20C-1.7%2069.9,%20-2.0%2066.4,%20-2.1%2059.5%20C-2.2%2052.5,%20-2.0%2038.3,%20-1.1%2032.0%20C-0.2%2025.7,%201.4%2025.1,%203.3%2021.7%20C5.1%2018.4,%207.0%2014.2,%2010.0%2012.1%20C13.0%209.9,%2016.9%2010.3,%2021.3%208.9%20C25.7%207.6,%2030.5%205.4,%2036.5%204.1%20C42.6%202.7,%2054.0%201.4,%2057.5%200.9'%20vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E");
  --d-underline: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20240%2024'%20preserveAspectRatio='none'%3E%3Cg%20fill='none'%20stroke='black'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2014%20C%2050%206,%2090%2018,%20130%2010%20S%20200%206,%20236%2011'%20vector-effect='non-scaling-stroke'/%3E%3Cpath%20d='M30%2019%20C%2090%2013,%20160%2021,%20214%2015'%20vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E");
  --d-squiggle: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20180%2030'%20preserveAspectRatio='none'%3E%3Cg%20fill='none'%20stroke='black'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2018%20C%2014%204,%2024%2028,%2036%2016%20S%2058%204,%2070%2016%20S%2092%2028,%20104%2016%20S%20126%204,%20138%2016%20S%20160%2026,%20177%2012'%20vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E");
  --d-arrow: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20160%2060'%20preserveAspectRatio='xMidYMid%20meet'%3E%3Cg%20fill='none'%20stroke='black'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2044%20C%2034%206,%20100%202,%20142%2032'%20vector-effect='non-scaling-stroke'/%3E%3Cpath%20d='M124%2022%20L144%2033%20L121%2044'%20vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E");
  --d-burst: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2090'%20preserveAspectRatio='none'%3E%3Cg%20fill='none'%20stroke='black'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2020%20L-0%204'%20vector-effect='non-scaling-stroke'/%3E%3Cpath%20d='M37%2020%20L28%204'%20vector-effect='non-scaling-stroke'/%3E%3Cpath%20d='M62%2020%20L57%204'%20vector-effect='non-scaling-stroke'/%3E%3Cpath%20d='M87%2020%20L85%204'%20vector-effect='non-scaling-stroke'/%3E%3Cpath%20d='M112%2020%20L114%204'%20vector-effect='non-scaling-stroke'/%3E%3Cpath%20d='M137%2020%20L142%204'%20vector-effect='non-scaling-stroke'/%3E%3Cpath%20d='M162%2020%20L171%204'%20vector-effect='non-scaling-stroke'/%3E%3Cpath%20d='M187%2020%20L199%204'%20vector-effect='non-scaling-stroke'/%3E%3Cpath%20d='M16%2034%20L3%2028'%20vector-effect='non-scaling-stroke'/%3E%3Cpath%20d='M184%2034%20L197%2028'%20vector-effect='non-scaling-stroke'/%3E%3Cpath%20d='M16%2052%20L3%2053'%20vector-effect='non-scaling-stroke'/%3E%3Cpath%20d='M184%2052%20L197%2053'%20vector-effect='non-scaling-stroke'/%3E%3Cpath%20d='M16%2070%20L3%2077'%20vector-effect='non-scaling-stroke'/%3E%3Cpath%20d='M184%2070%20L197%2077'%20vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E");

  --burst: polygon(0% 0%, 12.5% 22%, 25% 0%, 37.5% 22%, 50% 0%, 62.5% 22%, 75% 0%, 87.5% 22%, 100% 0%, 91% 25%, 100% 50%, 91% 75%, 100% 100%, 87.5% 78%, 75% 100%, 62.5% 78%, 50% 100%, 37.5% 78%, 25% 100%, 12.5% 78%, 0% 100%, 9% 75%, 0% 50%, 9% 25%);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
}

a { color: inherit; }
img { max-width: 100%; }
::selection { background: var(--butter); color: var(--ink); }

:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }
.band--cobalt :focus-visible { outline-color: var(--butter); }

.skip { position: absolute; left: -999px; }
.skip:focus {
  left: 1rem; top: 1rem; z-index: 10;
  background: var(--butter); padding: .5rem 1rem;
}

/* =========================================================
   STICKER BUTTONS (zig-zag edge with a dark outline)
   ========================================================= */
.sticker {
  --sticker: var(--pink);
  position: relative;
  isolation: isolate;
  display: inline-grid;
  place-items: center;
  min-width: 5rem;
  padding: .65rem 1.25rem;
  background: var(--ink);              /* this is the outline colour */
  clip-path: var(--burst);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 500;
  text-decoration: none;
  transition: transform .15s;
}

.sticker::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  background: var(--sticker);
  clip-path: var(--burst);
}

.sticker--pink   { --sticker: var(--pink); }
.sticker--sky    { --sticker: var(--sky); }
.sticker--butter { --sticker: var(--butter); }
.sticker--mint   { --sticker: var(--mint); }
.sticker--violet { --sticker: var(--violet); color: #fff; }
.sticker--large  { font-size: 1rem; padding: .9rem 1.75rem; }

.sticker:hover { transform: rotate(-4deg) scale(1.06); }
.sticker:focus-visible {
  outline: none;                       /* the outline would be clipped by the zig-zag shape */
  --sticker: #fff;
  text-decoration: underline;
}

/* =========================================================
   HERO (mobile first: everything stacks)
   ========================================================= */
.hero {
  padding: var(--gutter);
  background: var(--paper);
  color: var(--cobalt);
}

.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-height: max(36rem, calc(100vh - 2 * var(--gutter)));
  min-height: max(36rem, calc(100svh - 2 * var(--gutter)));
  padding: 1.25rem 1.25rem 0;
  border: 2px solid var(--pink);
  overflow: hidden;
}

.logo {
  margin: 0;
  font-family: var(--font-hand);
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1;
}
.logo a { text-decoration: none; }

.clock {
  margin: .5rem 0 0;
  font-size: .8rem;
  line-height: 1.4;
}

.stage__nav { display: flex; flex-wrap: wrap; gap: .6rem; }

.note {
  margin: 0;
  color: var(--cobalt);
  font-family: var(--font-hand);
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  line-height: 1.1;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tag { display: flex; align-items: center; gap: .4rem; font-size: .95rem; }
.tag__star { color: var(--cobalt); }

.stage__portrait {
  align-self: center;
  display: block;
  width: min(85%, 26rem);
  height: auto;
  margin-top: auto;
}

/* =========================================================
   HERO (wide screens: words float around the portrait)
   ========================================================= */
@media (min-width: 56rem) {
  .stage { display: block; padding: 0; }

  .stage__logo { position: absolute; top: 1.25rem; left: 1.5rem; z-index: 2; }
  .stage__nav  { position: absolute; top: 1.25rem; right: 1.5rem; z-index: 2; }

  .note { position: absolute; z-index: 2; font-size: clamp(1.75rem, 2.7vw, 3rem); }
  .note--left  { left: 4%;  top: 38%; }
  .note--right { right: 4%; top: 33%; max-width: 22rem; text-align: right; }

  .tags { display: block; }
  .tag {
    position: absolute;
    flex-direction: column;
    gap: .1rem;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  .tag--1 { left: 21%; top: 27%; }
  .tag--2 { left: 38%; top: 14%; }
  .tag--3 { left: 79%; top: 23%; }
  .tag--4 { left: 23%; top: 49%; }
  .tag--5 { left: 77%; top: 60%; }

  .stage__portrait {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: auto;
    height: min(80%, 52rem, 62vw);
    margin: 0;
    transform: translateX(-50%);
  }
}

/* =========================================================
   SECTIONS
   ========================================================= */
.section {
  max-width: 90rem;
  margin-inline: auto;
  padding: clamp(3rem, 8vw, 7rem) var(--gutter);
}

.band--tint   { background: var(--tint); }
.band--cobalt { background: var(--cobalt); color: #fff; }

.hand-title {
  margin: 0 0 .5rem;
  font-family: var(--font-hand);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
}
.hand-title--big {
  font-size: clamp(3rem, 9vw, 6.5rem);
  margin-bottom: clamp(1.25rem, 3vw, 2.5rem);
}

/* =========================================================
   ABOUT (drawing left, text right)
   ========================================================= */
.about {
  display: grid;
  gap: 2rem;
}

.about__portrait { margin: 0; }
.about__portrait img { display: block; width: 100%; max-width: 30rem; height: auto; }

.about__text p { margin: 0 0 2.25rem; max-width: 36rem; }
.about__text .hand-title { margin-top: 0; }

.tools {
  columns: 3;
  column-gap: 2rem;
  margin: 0 0 2.25rem;
  padding: 0;
  list-style: none;
  max-width: 36rem;
}

.contents {
  margin: 0;
  padding: 0;
  list-style: none;
}
.contents a {
  display: inline-flex;
  align-items: baseline;
  gap: .75rem;
  padding-block: .2rem;
  text-decoration: none;
}
.contents a:hover { text-decoration: underline; text-underline-offset: .25em; }
.contents__n { font-family: var(--font-hand); font-size: 1.75rem; line-height: 1; }

@media (min-width: 56rem) {
  .about { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4rem; align-items: start; }
}

/* =========================================================
   WORK GRID
   ========================================================= */
.work-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(.75rem, 2vw, 1.5rem);
}

.tile {
  --tile: var(--butter);
  --tile-ink: var(--ink);
  grid-column: span 12;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: clamp(.75rem, 1.5vw, 1.25rem);
  border: 2px solid var(--ink);
  background-color: var(--tile);
  color: var(--tile-ink);
  text-decoration: none;
  transition: background-color .2s, color .2s;
}

.tile--butter { --tile: var(--butter); }
.tile--cobalt { --tile: var(--cobalt); --tile-ink: #fff; }
.tile--mint   { --tile: var(--mint); }
.tile--pink   { --tile: var(--pink); }
.tile--sky    { --tile: var(--sky); }

/* Hover and keyboard focus: the tile flips to dark */
.tile:hover,
.tile:focus-visible {
  --tile: var(--ink);
  --tile-ink: #fff;
}

.tile__media {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  margin-bottom: .5rem;
  overflow: hidden;
  font-weight: 500;
  /* striped placeholder, disappears once you add an <img> */
  background: repeating-linear-gradient(135deg, rgba(0,0,0,.08) 0 12px, transparent 12px 24px);
}
.tile__media--wide { aspect-ratio: 21 / 9; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; }

.tile__title {
  margin: 0;
  font-family: var(--font-hand);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 400;
  line-height: 1.1;
}
.tile__text { margin: 0; max-width: 40rem; }
.tile__year { margin: 0; font-weight: 500; }

@media (min-width: 48rem) {
  .tile--7  { grid-column: span 7; }
  .tile--5  { grid-column: span 5; }
  .tile--12 { grid-column: span 12; }
}

/* =========================================================
   CV
   ========================================================= */
.cv__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.cv__head .sticker { margin-bottom: clamp(1.25rem, 3vw, 2.5rem); }

.cv-group {
  display: grid;
  gap: 1rem;
  padding-block: 1.75rem;
  border-top: 2px solid var(--ink);
}

.cv-group__title {
  margin: 0;
  font-family: var(--font-hand);
  font-size: 1.75rem;
  font-weight: 400;
}

.cv-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: .25rem;
  margin-bottom: 1.5rem;
}
.cv-row:last-child { margin-bottom: 0; }

.cv-row__when { margin: 0; color: var(--muted); font-weight: 500; }
.cv-row__what { margin: 0 0 .25rem; font-size: 1.125rem; font-weight: 600; }
.cv-row p { margin: 0; max-width: 40rem; }

.skills {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.skills li {
  padding: .2rem .9rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-weight: 500;
}

@media (min-width: 48rem) {
  .cv-group { grid-template-columns: 12rem 1fr; }
}

/* =========================================================
   CONTACT + FOOTER
   ========================================================= */
.contact__email {
  display: inline-block;
  font-family: var(--font-hand);
  font-size: clamp(1.75rem, 7vw, 5rem);
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.contact__links {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}

.footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem var(--gutter);
  font-size: .95rem;
}
.footer p { margin: 0; }

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tile, .sticker { transition: none; }
  .sticker:hover { transform: none; }
}


/* =========================================================
   ADDITIONS: events, youtube, fuller CV
   ========================================================= */
.section__intro {
  max-width: 36rem;
  margin: 0 0 2rem;
}

/* three-across tiles (events) */
@media (min-width: 48rem) {
  .tile--4 { grid-column: span 4; }
}

/* youtube */
.videos {
  display: grid;
  gap: clamp(.75rem, 2vw, 1.5rem);
}
.video {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 2px solid var(--ink);
  background: repeating-linear-gradient(135deg, rgba(23,22,43,.08) 0 12px, transparent 12px 24px);
  font-weight: 500;
  text-decoration: none;
}
a.video:hover { background: var(--butter); }
.video iframe { width: 100%; height: 100%; border: 0; }

@media (min-width: 48rem) {
  .videos { grid-template-columns: repeat(3, 1fr); }
}

/* CV details */
.cv-row .cv-row__where { margin: 0 0 .5rem; color: var(--muted); }
.cv-list { margin: 0; padding-left: 1.1rem; max-width: 44rem; }
.cv-list li { margin-bottom: .4rem; }

.skills-label { margin: 1.25rem 0 .5rem; font-weight: 600; }
.skills-label--first { margin-top: 0; }


/* =========================================================
   TYPE: Space Mono, bold lowercase headings (blue slide-deck look)
   ========================================================= */
body { font-size: 1rem; line-height: 1.65; }

.logo, .note, .hand-title, .tile__title, .cv-group__title,
.contents__n, .contact__email, .sticker {
  font-weight: 700;
  letter-spacing: -0.02em;
}

.hand-title, .cv-group__title, .contents__n { color: var(--cobalt); }
.band--cobalt .hand-title { color: #fff; }

.logo { font-size: 2.25rem; }
.clock { font-size: .75rem; }
.tag { font-size: .85rem; }
.contact__email { font-size: clamp(1.25rem, 4.2vw, 3.5rem); }
.contents__n { font-size: 1.5rem; }

@media (min-width: 48rem) {
  .cv-row { grid-template-columns: 10rem 1fr; gap: 1rem; }
}

/* =========================================================
   STARS: each one a different colour
   ========================================================= */
.tag__star {
  font-size: 1.5rem;
  line-height: 1;
  -webkit-text-stroke: 1px var(--ink);
}
.tag--1 .tag__star { color: var(--pink); }
.tag--2 .tag__star { color: var(--sky); }
.tag--3 .tag__star { color: var(--butter); }
.tag--4 .tag__star { color: var(--mint); }
.tag--5 .tag__star { color: var(--violet); }

/* =========================================================
   DOODLES: hand-drawn ovals, arrows, underlines and bursts.
   They take the colour of the text they sit next to.
   ========================================================= */
.doodle-host { position: relative; width: fit-content; }
.circled { position: relative; display: inline-block; }

.doodle {
  display: block;
  pointer-events: none;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;       mask-repeat: no-repeat;
  -webkit-mask-position: center;        mask-position: center;
  -webkit-mask-size: 100% 100%;         mask-size: 100% 100%;
}
.doodle { color: var(--cobalt); }
.band--cobalt .doodle { color: #fff; }

.doodle--oval {
  position: absolute;
  inset: -.55em -1em;
  -webkit-mask-image: var(--d-oval);    mask-image: var(--d-oval);
}
.doodle--underline {
  width: 100%;
  height: max(.3em, 10px);
  margin-top: .1em;
  -webkit-mask-image: var(--d-underline); mask-image: var(--d-underline);
}
.doodle--squiggle {
  width: 100%;
  height: max(.4em, 12px);
  margin-top: .05em;
  -webkit-mask-image: var(--d-squiggle); mask-image: var(--d-squiggle);
}
.doodle--burst {
  position: absolute;
  inset: -.7em -.9em;
  -webkit-mask-image: var(--d-burst);   mask-image: var(--d-burst);
}
.doodle--arrow {
  width: 8rem;
  height: 3rem;
  -webkit-mask-size: contain;           mask-size: contain;
  -webkit-mask-image: var(--d-arrow);   mask-image: var(--d-arrow);
}

/* space so doodles don't touch the text below */
.doodle-host.hand-title { margin-bottom: 1rem; }
.hand-title--big.doodle-host { margin-bottom: clamp(1.5rem, 3.5vw, 3rem); }

/* arrow between the YouTube title and its button */
.doodle--between { margin-bottom: 2rem; }

/* hero arrow under "hi! i'm a…" (wide screens only) */
@media (max-width: 55.99rem) {
  .note .doodle--arrow { display: none; }
}
@media (min-width: 56rem) {
  .note--left .doodle--arrow {
    position: absolute;
    top: 100%;
    left: 2.5rem;
    margin-top: .25rem;
  }
}


/* =========================================================
   CV OVERVIEW (two columns, like a one-page CV)
   ========================================================= */
.cv2 { display: grid; gap: 3rem; margin-top: 1rem; }

.cv2__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.cv2__name { margin: 0 0 .25rem; font-size: 1.25rem; font-weight: 700; color: var(--cobalt); }
.cv2__role { margin: 0; }

.cv2__photo { margin: 0; width: clamp(6rem, 14vw, 10rem); }
.cv2__frame {
  position: relative;
  isolation: isolate;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 2px solid var(--cobalt);
  background: #fff;
}
.cv2__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  filter: grayscale(1) brightness(1.08) contrast(1.05);
}
/* cobalt duotone: dark areas turn cobalt, white stays white */
.cv2__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cobalt);
  mix-blend-mode: lighten;
}

.cv2__cols { display: grid; gap: 3rem; }
.cv2__left, .cv2__right { display: grid; gap: 2.75rem; align-content: start; }

.cv2__h {
  margin: 0 0 .5rem;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cobalt);
}
.cv2 p { margin: 0; }

.plain { margin: 0; padding: 0; list-style: none; }
.langs li { display: flex; gap: 1.25rem; }
.plus { color: var(--cobalt); font-weight: 700; letter-spacing: .12em; }
.cv2__contact { line-height: 1.7; }

.xp { margin-bottom: 2rem; }
.xp:last-child { margin-bottom: 0; }
.xp__role { margin: 0; font-size: 1.0625rem; font-weight: 700; }
.xp__where { margin: .4rem 0 .6rem; line-height: 2.1; color: var(--muted); }
.xp__text { max-width: 30rem; }
.xp__award { margin-top: .5rem; font-weight: 700; }

.award__star {
  color: var(--butter);
  font-size: 1.25rem;
  -webkit-text-stroke: 1px var(--ink);
}

/* company names get a doodle around or under them */
.company {
  position: relative;
  display: inline-block;
  font-weight: 700;
  color: var(--cobalt);
}
.company .doodle--underline,
.company .doodle--squiggle {
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: .55em;
  margin: 0;
}
.company .doodle--burst { inset: -.5em -.7em; }

@media (min-width: 56rem) {
  .cv2__cols { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .cv2__right {
    text-align: right;
    justify-items: end;
    padding-top: clamp(4rem, 12vw, 9rem);
  }
  .xp__text { margin-left: auto; }
}

/* =========================================================
   LOGO DOODLES (optional)
   To use a company's real logo instead of its name, upload the logo as a
   PNG or SVG with a transparent background, then replace the
   <span class="company">…</span> with:
     <span class="logo-doodle" style="--logo:url('logo-accenture.png')" role="img" aria-label="Accenture"></span>
   The logo is redrawn as a single flat cobalt shape.
   ========================================================= */
.logo-doodle {
  display: inline-block;
  width: 7rem;
  height: 2rem;
  vertical-align: middle;
  background-color: var(--cobalt);
  -webkit-mask: var(--logo) right center / contain no-repeat;
          mask: var(--logo) right center / contain no-repeat;
}
@media (max-width: 55.99rem) {
  .logo-doodle { -webkit-mask-position: left center; mask-position: left center; }
}


/* one big YouTube player */
.videos--single { grid-template-columns: 1fr; max-width: 56rem; }


/* =========================================================
   OVALS: more room around the words so they stay readable
   ========================================================= */
.circled { line-height: 1.2; }
.note .circled { margin-inline: .6em; }
.hand-title--oval { margin-left: .7em; }
.hand-title--oval .doodle--oval { inset: -.5em -.7em; }
.company .doodle--oval { inset: -.65em -1.8em; }
.xp__text { line-height: 1.9; }
.xp__text .doodle--oval { inset: -.4em -.9em; }
.xp__text .circled { margin-inline: .3em; }
@media (max-width: 55.99rem) {
  .note .doodle--oval { inset: -.5em -.7em; }
}
@media (min-width: 56rem) {
  .note--right { right: 7%; }
}

/* small route line under "living and working in New York, NY" */
.note__route {
  display: block;
  margin-top: 1.1rem;
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
}

/* =========================================================
   JOURNEY MAP (About)
   ========================================================= */
.journey { margin: 0 0 2.5rem; max-width: 36rem; }
.journey svg { display: block; width: 100%; height: auto; color: var(--cobalt); }
.journey figcaption { margin-top: .5rem; font-size: .85rem; color: var(--muted); }


/* =========================================================
   TYPE v3: tight grotesque, big uppercase headings
   (Inter Tight, medium weight, very tight letter-spacing)
   ========================================================= */
:root {
  --font-hand: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
}

body { font-size: .95rem; line-height: 1.5; }

.logo, .note, .hand-title, .tile__title, .cv-group__title, .cv2__h,
.cv2__name, .contact__email, .sticker, .contents__n {
  font-weight: 500;
  letter-spacing: -0.045em;
}
.sticker { letter-spacing: -0.01em; }

.hand-title, .cv2__h, .cv-group__title, .logo { text-transform: uppercase; }

.logo { font-size: 1.75rem; line-height: 1; }
.note { line-height: 1; letter-spacing: -0.04em; }

.hand-title {
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  line-height: .92;
  margin-bottom: .9rem;
}
.hand-title--big {
  font-size: clamp(3.5rem, 12vw, 10rem);
  line-height: .88;
}

.cv2__h {
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  line-height: .95;
  margin-bottom: .75rem;
}
.cv2__name { font-size: 1.25rem; }
.tile__title { line-height: 1; }
.contents__n { font-size: 1.25rem; }
.contact__email { font-size: clamp(1.5rem, 5.6vw, 4.75rem); line-height: 1; }

.xp__role, .company { font-weight: 600; }
.plus { font-weight: 600; letter-spacing: .1em; }
.plain { line-height: 1.4; }
.xp__text { line-height: 1.8; }

/* doodles scale with the bigger headings, so keep them slimmer */
.doodle--underline { height: max(.16em, 10px); }
.doodle--squiggle  { height: max(.26em, 12px); }
.hand-title--oval { margin-left: .5em; }
.hand-title--oval .doodle--oval { inset: -.3em -.5em; }


/* =========================================================
   HERO: job title and Download CV button for recruiters
   ========================================================= */
.stage__title {
  margin: .4rem 0 0;
  max-width: 16rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.hero-cv { margin-top: .9rem; }
.hero-cv + .clock { margin-top: 1rem; }

.sticker--cobalt { --sticker: var(--cobalt); color: #fff; }
/* white-text stickers need dark text when focused (the focus fill is white) */
.sticker--cobalt:focus-visible,
.sticker--violet:focus-visible { color: var(--ink); }


/* =========================================================
   PILLS: menu and buttons, highlighted when hovered or focused
   ========================================================= */
.stage__nav {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem;
  padding: .3rem;
  border: 2px solid var(--cobalt);
  border-radius: 1.6rem;
  background: #fff;
}
@media (min-width: 40rem) {
  .stage__nav { border-radius: 999px; }
}

.pill-nav__link {
  padding: .6rem 1.05rem;
  border-radius: 999px;
  color: var(--cobalt);
  font-size: .8rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color .18s, color .18s;
}
.pill-nav__link:hover,
.pill-nav__link:focus-visible {
  background: var(--cobalt);
  color: #fff;
  outline: none;
}
.pill-nav__link:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--cobalt); }

/* every other button becomes a pill too */
.sticker {
  min-width: 0;
  padding: .7rem 1.35rem;
  border: 2px solid var(--cobalt);
  border-radius: 999px;
  background: #fff;
  clip-path: none;
  color: var(--cobalt);
  font-size: .8rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  transition: background-color .18s, color .18s;
}
.sticker::before { display: none; }
.sticker--large { padding: .9rem 1.6rem; font-size: .85rem; }

.sticker:hover,
.sticker:focus-visible,
.sticker--violet:hover,
.sticker--violet:focus-visible {
  background: var(--cobalt);
  color: #fff;
  transform: none;
  text-decoration: none;
}
.sticker:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }

/* the main call to action starts filled and flips on hover */
.sticker--cobalt { background: var(--cobalt); color: #fff; }
.sticker--cobalt:hover,
.sticker--cobalt:focus-visible { background: #fff; color: var(--cobalt); }

/* on the cobalt contact block */
.band--cobalt .sticker { background: transparent; border-color: #fff; color: #fff; }
.band--cobalt .sticker:hover,
.band--cobalt .sticker:focus-visible { background: #fff; color: var(--cobalt); }
.band--cobalt .sticker:focus-visible { outline-color: var(--butter); }

.video-fallback { margin: 1rem 0 0; font-size: .85rem; color: var(--muted); }


/* =========================================================
   CV v2: bullets, notes, left-aligned right column
   ========================================================= */
.cv-list { line-height: 1.8; }
.cv-list li::marker { color: var(--cobalt); }
.cv-list .doodle--oval { inset: -.4em -.9em; }
.cv-list .circled { margin-inline: .3em; }
.cv2__note { margin-top: .25rem; color: var(--muted); font-style: italic; }
.good li { margin-bottom: .15rem; }
.xp__extra { margin-top: 1rem; }

@media (min-width: 56rem) {
  .cv2__right {
    text-align: left;
    justify-items: start;
    padding-top: clamp(1.5rem, 4vw, 3rem);
  }
  .xp__text { margin-left: 0; }
}


/* =========================================================
   TIGHTER LAYOUT: narrower content, smaller gaps, easier to scan
   ========================================================= */
body { font-size: 1rem; line-height: 1.6; }

/* content no longer stretches edge to edge on big screens */
.section {
  max-width: 72rem;
  padding: clamp(2rem, 5vw, 3.75rem) var(--gutter);
}

/* a slightly shorter hero */
.stage {
  min-height: max(34rem, calc(92vh - 2 * var(--gutter)));
  min-height: max(34rem, calc(92svh - 2 * var(--gutter)));
}

/* smaller headings */
.hand-title { font-size: clamp(1.75rem, 3.4vw, 2.5rem); margin-bottom: .6rem; }
.hand-title--big { font-size: clamp(2.75rem, 8vw, 5.5rem); }
.doodle-host.hand-title { margin-bottom: .9rem; }
.hand-title--big.doodle-host { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.section__intro { margin-bottom: 1.25rem; }
.cv2__h { margin-bottom: .4rem; }

/* about */
.about { gap: 1.5rem; }
.about__portrait img { max-width: 24rem; }
.about__text p { margin: 0 0 1rem; }
.about__text > .hand-title:not(:first-child) { margin-top: 1.75rem; }
.tools, .journey { margin-bottom: 0; }
.tools { margin-top: .25rem; }
.journey { margin-top: .5rem; }
@media (min-width: 56rem) {
  .about { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 2.5rem; }
}

/* work and branding tiles */
.work-grid { gap: .75rem; }
.tile { padding: .85rem; gap: .35rem; }
.tile__media { aspect-ratio: 16 / 10; margin-bottom: .35rem; }
.tile__media--wide { aspect-ratio: 21 / 8; }
.tile__title { font-size: clamp(1.5rem, 2.4vw, 2rem); }

/* cv */
.cv2 { gap: 1.75rem; margin-top: .5rem; }
.cv2__cols { gap: 2rem; }
.cv2__left, .cv2__right { gap: 1.5rem; }
.xp { margin-bottom: 1.25rem; }
.xp__where { margin-bottom: .4rem; }
.cv-list { line-height: 1.7; }
.xp__text { line-height: 1.7; }
@media (min-width: 56rem) {
  .cv2__cols { gap: 3rem; }
  .cv2__right { padding-top: 0; }
}

/* contact and footer */
.contact__email { font-size: clamp(1.25rem, 4vw, 3rem); }
.contact__links { margin-top: 1.25rem; }
.footer { padding-block: 1rem; }


/* =========================================================
   SEPARATE PAGES: sticky menu bar on every page except home
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid rgba(43, 53, 245, .18);
}
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: .75rem var(--gutter);
}
.site-header__logo {
  color: var(--cobalt);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}
.site-header .stage__nav { position: static; }

/* the page you are on stays highlighted in the menu */
.pill-nav__link[aria-current="page"] { background: var(--cobalt); color: #fff; }

main { min-height: 55vh; }
.band--cobalt { min-height: 50vh; }