/* askeschou.com: one stylesheet for the whole site.
   The "Bento" design the owner chose on 2026-10-31: dark background, rounded
   tiles, Inter, blush and pink accents. Sections:
   1 fonts and tokens, 2 base, 3 header and footer, 4 shared parts (tile, label,
   buttons, link cards, blush closing tile), 5 home page, 6 reading pages (posts,
   privacy policy, 404), 7 category and tag pages, 8 freelance marketing page,
   9 tablet, 10 phone, 11 motion. */

/* ---------- 1 fonts and tokens ---------- */

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg: #0b0b0c;
  --tile: #141416;
  --tile-hi: #19191c;
  --line: rgba(255, 255, 255, 0.08);
  --line-hi: rgba(247, 214, 208, 0.36);
  --text: #f4efed;
  --soft: #cdc7c4;
  --muted: #a39d9a;
  --track: #2a292c;
  --blush: #f7d6d0;
  --pink: #daa49c;
  --rose: #f7cac9;
  --ink: #0b0b0c;
  --ink-soft: #4f3d3a;
  --r-lg: 28px;
  --r-md: 20px;
  --gap: 14px;
  --pad: clamp(20px, 2.3vw, 32px);
}

/* ---------- 2 base ---------- */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--soft);
  font-family: "Inter", sans-serif;
  font-size: 15.5px;
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }

a { color: inherit; }

::selection { background: var(--blush); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--blush);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px; top: 12px;
  z-index: 10;
  padding: 10px 16px;
  background: var(--blush);
  color: var(--ink);
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
}
.skip-link:focus-visible { transform: none; outline-color: var(--text); }

.shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(16px, 2.6vw, 32px);
}

/* ---------- 3 header and footer ---------- */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 4px 18px;
}
.wordmark {
  color: var(--text);
  font-weight: 650;
  font-size: 17px;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.top nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.top nav a {
  display: block;
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color .2s, background-color .2s;
}
.top nav a:hover { color: var(--text); background: var(--tile); }
.top nav a[aria-current="page"] { color: var(--text); }
.top nav .to-contact {
  color: var(--text);
  border: 1px solid var(--line);
}

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  padding: 26px 4px 40px;
  font-size: 14px;
  color: var(--muted);
}
.foot ul { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.foot a { color: var(--soft); text-underline-offset: 3px; }
.foot a:hover { color: var(--text); }

/* ---------- 4 shared parts ---------- */

.tile {
  position: relative;
  min-width: 0;
  background: var(--tile);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--pad);
  scroll-margin-top: 16px;
}

.label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--muted);
  margin-bottom: 14px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: auto;
  padding-top: 26px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--blush);
  color: var(--ink);
  font-weight: 620;
  font-size: 15.5px;
  text-decoration: none;
  transition: background-color .2s, transform .2s;
}
.btn svg { width: 16px; height: 16px; }
.btn:hover { background: #fff1ee; }


/* Link cards: the whole tile is one link (projects on the home page, posts on
   category and tag pages). The heading's link stretches over the tile. */
.project, .entry {
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, border-color .25s ease, background-color .25s ease;
}
.project h3 a, .entry h2 a { text-decoration: none; }
.project h3 a::after, .entry h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.project h3 a:focus-visible, .entry h2 a:focus-visible { outline: none; }
.project h3 a:focus-visible::after, .entry h2 a:focus-visible::after { outline: 2px solid var(--blush); outline-offset: 3px; }
.project .go, .entry .go {
  position: absolute;
  top: var(--pad);
  right: var(--pad);
  width: 30px;
  height: 30px;
  padding: 8px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--muted);
  transition: color .25s, border-color .25s, background-color .25s;
}
@media (hover: hover) {
  .project:hover, .entry:hover {
    transform: translateY(-3px);
    border-color: var(--line-hi);
    background: var(--tile-hi);
  }
  .project:hover .go, .entry:hover .go { color: var(--ink); background: var(--blush); border-color: var(--blush); }
}

/* Blush closing tile: contact on the home page, the call to action on the
   freelance marketing page. */
.contact {
  background: var(--blush);
  border-color: transparent;
  color: var(--ink);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 28px 48px;
  align-items: end;
  padding: clamp(24px, 3.4vw, 48px);
}
.contact .label { color: var(--ink-soft); }
.contact .say {
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 640;
  line-height: 1.04;
  letter-spacing: -0.045em;
  max-width: 15ch;
}
.contact ul { display: grid; gap: 14px; justify-items: start; }
.contact li span {
  display: block;
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-bottom: 2px;
}
.contact a {
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.025em;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(11, 11, 12, 0.3);
  text-underline-offset: 6px;
  transition: text-decoration-color .2s;
}
.contact a:hover { text-decoration-color: var(--ink); }
.contact :focus-visible { outline-color: var(--ink); }

/* The contact form, beside the text (version A, owner 2026-10-31). It posts to
   api/contact.php, which sends the visitor back to /#sent or /#error; the
   matching note then shows in place of the form. */
.contact.has-form { align-items: stretch; }
.contact .lead { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.cform-col { min-width: 0; }
.cform .send {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--blush);
  font: inherit;
  font-size: 15.5px;
  font-weight: 620;
  cursor: pointer;
  transition: background-color .2s;
}
.cform .send svg { width: 16px; height: 16px; }
.cform .send:hover { background: #2a2729; }
.cform { display: grid; gap: 14px; align-content: start; min-width: 0; }
.cform .pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.cform label { display: grid; gap: 6px; font-size: 13.5px; color: var(--ink-soft); }
.cform input, .cform textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(11, 11, 12, 0.16);
  border-radius: 14px;
  padding: 12px 14px;
  transition: background-color .2s, border-color .2s;
}
.cform textarea { min-height: 132px; resize: vertical; }
.cform input:hover, .cform textarea:hover { border-color: rgba(11, 11, 12, 0.32); }
.cform input:focus-visible, .cform textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
  background: rgba(255, 255, 255, 0.78);
}
/* The spam trap: a field people never see, so only robots fill it in. */
.cform .trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact .note {
  display: none;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 18px;
  padding: 22px 24px;
  scroll-margin-top: 40vh;
}
.contact .note:target { display: block; }
.contact .note:target ~ .cform { display: none; }
.contact .note a { font-size: inherit; letter-spacing: inherit; }

/* ---------- 5 home page ---------- */

.bento {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "intro intro intro intro intro intro photo photo photo place place place"
    "intro intro intro intro intro intro photo photo photo lang  lang  lang"
    "now   now   now   now   now   now   proj  proj  proj  proj  proj  proj"
    "exp   exp   exp   exp   exp   exp   exp   exp   exp   exp   exp   exp"
    "skill skill skill skill skill skill skill write write write write write"
    "cont  cont  cont  cont  cont  cont  cont  cont  cont  cont  cont  cont"
    "about about about about about about about about about about about about";
}

.bento > .intro { grid-area: intro; }
.bento > .photo { grid-area: photo; }
.bento > .place { grid-area: place; }
.bento > .lang  { grid-area: lang; }
.bento > .now   { grid-area: now; }
.bento > .projects { grid-area: proj; }
.bento > .exp   { grid-area: exp; }
.bento > .skills { grid-area: skill; }
.bento > .writing { grid-area: write; }
.bento > .personal { grid-area: about; }
.bento > .contact { grid-area: cont; }

/* intro (also the first tile of the freelance marketing page) */

.intro {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding-top: calc(var(--pad) + 6px);
}
.intro h1 {
  color: var(--text);
  font-size: 64px;
  font-size: min(17.4cqi, 124px);
  font-weight: 650;
  line-height: 0.9;
  letter-spacing: -0.055em;
  margin-left: -0.04em;
}
.intro h1 span { display: block; }
.intro .lead {
  color: var(--text);
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.35;
  letter-spacing: -0.015em;
  font-weight: 500;
  max-width: 30ch;
}
.intro .lead + p {
  margin-top: 14px;
  max-width: 52ch;
  color: var(--soft);
}

/* portrait */

.photo {
  padding: 0;
  overflow: hidden;
  background: var(--blush);
  border-color: transparent;
  min-height: 240px;
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 40%;
  mix-blend-mode: multiply;
  filter: contrast(1.08);
}

/* location */

.place {
  display: flex;
  flex-direction: column;
}
.route {
  flex: 1;
  width: 100%;
  min-height: 56px;
  max-height: 120px;
  margin: 2px 0 14px;
}
.route { overflow: visible; }
.route .lat { stroke: var(--line); stroke-width: 1; stroke-dasharray: 1 5; vector-effect: non-scaling-stroke; }
.route .coord { fill: var(--muted); font-size: 7.5px; letter-spacing: .06em; font-variant-numeric: tabular-nums; opacity: .75; }
.route .trail { fill: none; stroke: var(--pink); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; opacity: .45; vector-effect: non-scaling-stroke; }
.route .ink { fill: none; stroke: var(--pink); stroke-width: 1.2; stroke-linecap: round; opacity: .9; }
.route .from { fill: none; stroke: var(--muted); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.route .here { fill: var(--blush); }
.route .halo { fill: var(--blush); opacity: .16; }
.route .ripple { fill: none; stroke: var(--blush); stroke-width: 1; opacity: 0; vector-effect: non-scaling-stroke; }
.route .spark { fill: var(--blush); filter: drop-shadow(0 0 3px rgba(247, 214, 208, .9)); }
/* The line draws itself once, like a pen stroke. */
@media (prefers-reduced-motion: no-preference) {
  .route .ink { stroke-dasharray: 100; stroke-dashoffset: 100; animation: route-draw 1.4s cubic-bezier(.6, 0, .2, 1) .2s forwards; }
  .route .halo { animation: route-breathe 6s ease-in-out 1.4s infinite; transform-box: fill-box; transform-origin: center; }
}
/* Motion off: the drawn line and the two places, nothing moving. */
@media (prefers-reduced-motion: reduce) {
  .route .spark, .route .ripple { display: none; }
}
@keyframes route-draw { to { stroke-dashoffset: 0; } }
@keyframes route-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.city {
  color: var(--text);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 620;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.place .from-line { margin-top: 6px; color: var(--muted); font-size: 14.5px; }

/* scales (skills and languages) */

.scale { display: grid; gap: 9px; container-type: inline-size; }
.scale > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  font-size: 14.5px;
  line-height: 1.35;
}
.scale dt { color: var(--soft); }
.scale dd {
  display: flex;
  align-items: center;
  gap: 12px;
}
.meter {
  position: relative;
  display: block;
  flex: none;
  width: 80px;
  width: round(down, clamp(50px, 27cqi, 100px), 10px);
  height: 8px;
  background: var(--track);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 2px), transparent calc(10% - 2px) 10%);
          mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 2px), transparent calc(10% - 2px) 10%);
}
.meter i {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--v) * 10%);
  background: var(--pink);
  transform-origin: left center;
}
.v6 { --v: 6; } .v7 { --v: 7; } .v8 { --v: 8; } .v9 { --v: 9; } .v10 { --v: 10; }
.v10 i { background: var(--blush); }
.score {
  flex: none;
  min-width: 2.9em;
  white-space: nowrap;
  text-align: right;
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.score span { color: var(--muted); font-weight: 400; }

.lang .scale { gap: 11px; }

/* now: the freelance offer */

.now {
  border-color: rgba(218, 164, 156, 0.4);
  display: flex;
  flex-direction: column;
}
.now .label { color: var(--pink); }
.now h2 {
  color: var(--text);
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 640;
  line-height: 1.1;
  letter-spacing: -0.035em;
  max-width: 19ch;
}
.now h2 + p { margin-top: 16px; max-width: 54ch; }
.services {
  display: grid;
  gap: 8px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.services li {
  position: relative;
  padding-left: 22px;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
}
.services li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--pink);
}
.services li span { color: var(--muted); font-weight: 400; }


/* projects */

/* Three cards with the same build: stacked beside the Now tile on a wide screen,
   side by side on a tablet, one under another on a phone. Each card's name stays on
   one line by sizing to the card (cqi = 1% of the card's width). */
.projects {
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 1fr;
}
.project { container-type: inline-size; }
.project h3 {
  color: var(--text);
  font-size: clamp(19px, 9.4cqi, 32px);
  font-weight: 640;
  line-height: 1.05;
  letter-spacing: -0.04em;
  white-space: nowrap;
  margin-bottom: 12px;
}
.project p { font-size: 14.5px; }
.project .label { padding-right: 44px; }
.stat {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-size: 13.5px;
  color: var(--muted);
}
.stat b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* experience */

.exp-head {
  display: grid;
  gap: 4px;
}
.exp-head .label { margin: 0 0 6px; }
/* The text runs the full width of the card (owner, 2026-10-31). */
.exp-head p { max-width: none; }
.exp-head p b { color: var(--text); font-weight: 600; }

.xp-grid {
  --cols: 112px minmax(0, 1fr) minmax(0, 1.3fr) 18px;
}
.axis {
  display: grid;
  grid-template-columns: var(--cols);
  gap: 24px;
  margin-top: 30px;
  padding: 0 6px 8px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.axis .ticks { grid-column: 3; position: relative; height: 1.4em; }
.axis .ticks span { position: absolute; top: 0; transform: translateX(-50%); }
.axis .ticks span:nth-child(1) { left: 15%; }
.axis .ticks span:nth-child(2) { left: 40%; }
.axis .ticks span:nth-child(3) { left: 65%; }
.axis .ticks span:nth-child(4) { left: 90%; }

.xp { border-bottom: 1px solid var(--line); }
.xp summary {
  display: grid;
  grid-template-columns: var(--cols);
  grid-template-areas: "yr role track icon";
  gap: 6px 24px;
  align-items: center;
  padding: 14px 6px;
  cursor: pointer;
  list-style: none;
  border-radius: 12px;
  transition: background-color .2s;
}
.xp summary::-webkit-details-marker { display: none; }
.xp summary:hover { background: rgba(255, 255, 255, 0.025); }
.xp summary::after {
  grid-area: icon;
  content: "";
  width: 12px;
  height: 12px;
  justify-self: end;
  background:
    linear-gradient(var(--muted), var(--muted)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--muted), var(--muted)) center / 1.5px 12px no-repeat;
  transition: transform .25s ease;
}
.xp[open] summary::after { transform: rotate(45deg); }
.xp .yr {
  grid-area: yr;
  color: var(--muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.xp .role { grid-area: role; min-width: 0; }
.xp .role b {
  display: block;
  color: var(--text);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
}
.xp .role span { display: block; color: var(--muted); font-size: 14px; line-height: 1.35; }
.track {
  grid-area: track;
  position: relative;
  height: 8px;
  border-radius: 99px;
  background:
    linear-gradient(90deg, transparent calc(15% - 1px), #343236 calc(15% - 1px) 15%, transparent 15% calc(40% - 1px), #343236 calc(40% - 1px) 40%, transparent 40% calc(65% - 1px), #343236 calc(65% - 1px) 65%, transparent 65% calc(90% - 1px), #343236 calc(90% - 1px) 90%, transparent 90%),
    #1e1e21;
}
.track i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--s) * 5%);
  width: calc((var(--e) - var(--s)) * 5%);
  min-width: 8px;
  border-radius: 99px;
  background: var(--pink);
  transform-origin: left center;
}
.t-gcv  { --s: 18.83; --e: 19.83; }
.t-sec  { --s: 11; --e: 19.83; }
.t-sec i, .t-gcv i { background: linear-gradient(90deg, var(--pink), var(--blush)); }
.t-gdpr { --s: 11; --e: 16; }
.t-pm   { --s: 10; --e: 11; }
.t-ea   { --s: 8;  --e: 10; }
.t-eco  { --s: 6;  --e: 8; }
.t-msc  { --s: 0;  --e: 6; }
.t-msc i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--pink); }

.xp .more {
  padding: 2px 6px 20px calc(112px + 24px + 6px);
  display: grid;
  gap: 10px;
  max-width: calc(112px + 24px + 6px + 66ch);
}

/* skills */

.skills-head {
  display: grid;
  gap: 4px;
  margin-bottom: 24px;
}
.skills-head .label { margin: 0 0 6px; }
.skills-head p { max-width: 54ch; }
.skills-head p b { color: var(--text); font-weight: 600; }
.skill-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px 40px;
}
.skill-cols h3, .lang h3 {
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

/* writing */

.writing ol { border-top: 1px solid var(--line); }
.writing li { border-bottom: 1px solid var(--line); }
.writing a {
  display: grid;
  grid-template-columns: 5.6em minmax(0, 1fr);
  gap: 2px 16px;
  align-items: baseline;
  padding: 13px 6px;
  border-radius: 10px;
  text-decoration: none;
  transition: background-color .2s;
}
.writing time {
  color: var(--muted);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.writing a span {
  color: var(--text);
  font-weight: 500;
  font-size: 15.5px;
  line-height: 1.35;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color .2s;
}
.writing a small {
  grid-column: 2;
  margin-top: 4px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  max-width: 46ch;
}
.writing a:hover { background: rgba(255, 255, 255, 0.03); }
.writing a:hover span { text-decoration-color: var(--pink); }
.writing .newest span::after {
  content: "Latest";
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(247, 214, 208, 0.1);
  color: var(--blush);
  font-size: 12px;
  font-weight: 500;
  vertical-align: 2px;
}

/* budget: the animated bar for "Strategic versus non-strategic costs"
   (components/BudgetShift.astro). Running costs shrink, growth and profit grow. */

.budget-bar {
  display: flex;
  height: 18px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--track);
}
.budget-large { margin-bottom: 36px; }
.budget-large .budget-bar { height: 26px; border-radius: 8px; }
.budget-bar i { flex: none; }
/* The "after" state; with motion on, the bar moves between before and after. */
.budget-bar .run { width: 55%; background: #4a4749; }
.budget-bar .grow { width: 30%; background: var(--pink); }
.budget-bar .profit { width: 15%; background: var(--blush); }
.budget-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
}
.budget-key li::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 2px;
  vertical-align: 0;
}
.budget-key .run::before { background: #4a4749; }
.budget-key .grow::before { background: var(--pink); }
.budget-key .profit::before { background: var(--blush); }
@media (prefers-reduced-motion: no-preference) {
  .budget-bar .run { animation: budget-run 7s ease-in-out infinite; }
  .budget-bar .grow { animation: budget-grow 7s ease-in-out infinite; }
  .budget-bar .profit { animation: budget-profit 7s ease-in-out infinite; }
}
@keyframes budget-run { 0%, 15%, 100% { width: 80%; } 55%, 85% { width: 55%; } }
@keyframes budget-grow { 0%, 15%, 100% { width: 12%; } 55%, 85% { width: 30%; } }
@keyframes budget-profit { 0%, 15%, 100% { width: 8%; } 55%, 85% { width: 15%; } }

/* about, folded away under a small "Personal history" toggle */

.personal > summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px var(--pad);
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  transition: color .2s;
}
.personal > summary::-webkit-details-marker { display: none; }
.personal > summary h2 {
  margin: 0;
  color: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
}
.personal > summary::after {
  content: "";
  width: 10px;
  height: 10px;
  background:
    linear-gradient(currentColor, currentColor) center / 10px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 10px no-repeat;
  transition: transform .25s ease;
}
.personal > summary:hover { color: var(--text); }
.personal > summary:focus-visible { outline: 2px solid var(--blush); outline-offset: 2px; border-radius: 8px; }
.personal[open] > summary::after { transform: rotate(45deg); }
.personal > .about { margin-top: 6px; }

.about {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "ahead spain spain agri"
    "vegan vegan career career";
}
.a-head   { grid-area: ahead; }
.a-spain  { grid-area: spain; }
.a-agri   { grid-area: agri; }
.a-vegan  { grid-area: vegan; }
.a-career { grid-area: career; }
.about .tile { border-radius: var(--r-md); }
.about h3 {
  color: var(--text);
  font-size: 18px;
  font-weight: 620;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 10px;
}
.about p + p { margin-top: 10px; }
.about p { font-size: 15px; }
.about a {
  color: var(--blush);
  text-decoration: underline;
  text-decoration-color: rgba(247, 214, 208, 0.4);
  text-underline-offset: 3px;
}
.about a:hover { text-decoration-color: var(--blush); }
.a-head .bored {
  color: var(--text);
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 560;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin-bottom: 22px;
  max-width: 18ch;
}
.a-head h3 { font-size: 15px; color: var(--pink); margin-bottom: 6px; }
.a-career p {
  color: var(--text);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.45;
  letter-spacing: -0.012em;
  max-width: 40ch;
}

/* ---------- 6 reading pages: posts, privacy policy, 404 ---------- */

.reading {
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 64px) 0 clamp(56px, 8vw, 104px);
}
.reading-head {
  margin-bottom: 36px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.reading-head .label { margin-bottom: 18px; font-variant-numeric: tabular-nums; }
.reading h1, .archive h1 {
  color: var(--text);
  font-size: clamp(36px, 5.4vw, 56px);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.045em;
  margin-left: -0.03em;
}
.prose {
  color: var(--soft);
  font-size: 17.5px;
  line-height: 1.7;
}
.prose > * + * { margin-top: 1.1em; }
.prose > h1:first-child {
  margin-bottom: 36px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.prose h2, .prose h3, .prose h4 { color: var(--text); }
.prose h2 {
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 640;
  line-height: 1.15;
  letter-spacing: -0.03em;
}
.prose h3 { font-size: 21px; font-weight: 620; line-height: 1.25; letter-spacing: -0.02em; }
.prose h4 { font-size: 18px; font-weight: 620; line-height: 1.3; letter-spacing: -0.015em; }
.prose > h2 { margin-top: 1.9em; }
.prose > h3, .prose > h4 { margin-top: 1.6em; }
.prose > :is(h2, h3, h4) + * { margin-top: 0.55em; }
.prose > h1 + * { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--pink); }
.prose a {
  color: var(--blush);
  text-decoration: underline;
  text-decoration-color: rgba(247, 214, 208, 0.4);
  text-underline-offset: 3px;
}
.prose a:hover { text-decoration-color: var(--blush); }
.prose strong, .prose b { color: var(--text); font-weight: 600; }
.prose blockquote {
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--pink);
  color: var(--text);
  font-size: 1.08em;
  line-height: 1.6;
}
.prose > blockquote { margin-top: 1.6em; margin-bottom: 1.6em; }
.prose blockquote > * + * { margin-top: 0.8em; }

/* ---------- 7 category and tag pages ---------- */

.archive {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 64px) 0 clamp(56px, 8vw, 104px);
}
.archive-head { padding: 0 4px; margin-bottom: 28px; }
.entries { display: grid; gap: var(--gap); }
.entry .label { padding-right: 44px; font-variant-numeric: tabular-nums; }
.entry h2 {
  color: var(--text);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 640;
  line-height: 1.15;
  letter-spacing: -0.035em;
  margin-bottom: 12px;
}
.entry p:last-of-type { max-width: 64ch; }

/* ---------- 8 freelance marketing page ---------- */

.fm {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.fm-intro { grid-column: span 7; min-height: 520px; }
.fm-art { grid-column: span 5; }
.fm-services, .fm-examples, .fm-cta { grid-column: 1 / -1; }
.fm-value, .fm-pricing { grid-column: span 6; }

.fm-intro .lead { max-width: 34ch; }
.fm-intro .actions { padding-top: 22px; }

.fm-art {
  padding: 0;
  overflow: hidden;
  background: #000;
  border-color: transparent;
}
.fm-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fm .cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 40px;
}

.svc { padding-top: 18px; border-top: 1px solid var(--line); }
.svc .num {
  font-size: clamp(56px, 6vw, 84px);
  font-weight: 150;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--pink);
  margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}
.svc .num.rose { color: var(--rose); }
.svc .num.blush { color: var(--blush); }
.svc h3, .example h3 {
  color: var(--text);
  font-size: clamp(19px, 1.6vw, 22px);
  font-weight: 620;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin-bottom: 10px;
}
.svc p, .example p { font-size: 15px; }

.example video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
  border-radius: 14px;
  margin-bottom: 18px;
}
.example h3 a {
  text-decoration: underline;
  text-decoration-color: rgba(247, 214, 208, 0.45);
  text-underline-offset: 4px;
}
.example h3 a:hover { text-decoration-color: var(--blush); }

.fm-value { border-color: rgba(218, 164, 156, 0.4); }
.fm-value h2 {
  color: var(--text);
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 640;
  line-height: 1.1;
  letter-spacing: -0.035em;
  max-width: 19ch;
  margin-bottom: 22px;
}
.fm-value dl, .fm-pricing ul { border-top: 1px solid var(--line); }
.fm-value dl > div {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr);
  gap: 4px 16px;
  align-items: baseline;
  padding: 14px 2px;
  border-bottom: 1px solid var(--line);
}
.fm-value dt { color: var(--text); font-weight: 620; font-size: 17px; letter-spacing: -0.015em; }
.fm-value dt span { color: var(--pink); }

.fm-pricing li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  align-items: baseline;
  padding: 14px 2px;
  border-bottom: 1px solid var(--line);
}
.fm-pricing h3 { color: var(--text); font-size: 17px; font-weight: 620; letter-spacing: -0.015em; }
.fm-pricing .stars {
  color: var(--muted);
  font-size: 13.5px;
  white-space: nowrap;
}
.fm-pricing .stars span { color: var(--pink); letter-spacing: 2px; margin-right: 6px; }
.fm-pricing li > p:last-child { grid-column: 1 / -1; font-size: 15px; }

.fm-cta .say a {
  font: inherit;
  letter-spacing: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

/* ---------- 9 tablet ---------- */

@media (max-width: 1079px) {
  .projects { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; }
  .bento {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas:
      "intro intro intro intro photo photo"
      "place place place lang  lang  lang"
      "now   now   now   now   now   now"
      "proj  proj  proj  proj  proj  proj"
      "exp   exp   exp   exp   exp   exp"
      "skill skill skill skill skill skill"
      "write write write write write write"
      "cont  cont  cont  cont  cont  cont"
      "about about about about about about";
  }
  .about {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "ahead agri"
      "spain spain"
      "vegan career";
  }
  .now h2 { max-width: 22ch; }
  .exp-head { grid-template-columns: minmax(0, 1fr); }
  .xp-grid { --cols: 96px minmax(0, 1fr) minmax(0, 1fr) 18px; }
  .xp .more { padding-left: calc(96px + 24px + 6px); }

  .fm-intro { min-height: 460px; }
  .fm-value, .fm-pricing { grid-column: 1 / -1; }
  .fm-examples .cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .example {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    padding: 20px 0;
    border-top: 1px solid var(--line);
  }
  .example:first-child { padding-top: 0; border-top: 0; }
  .example:last-child { padding-bottom: 0; }
  .example video { margin-bottom: 0; }
}

/* ---------- 10 phone ---------- */

@media (max-width: 639px) {
  :root { --gap: 10px; --r-lg: 22px; --r-md: 18px; }
  body { font-size: 15px; }
  .top { padding: 16px 2px 14px; }
  .top nav li:not(.keep) { display: none; }
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "intro intro"
      "photo place"
      "lang  lang"
      "now   now"
      "proj  proj"
      "exp   exp"
      "skill skill"
      "write write"
      "cont  cont"
      "about about";
  }
  .intro { gap: 28px; }
  .photo { min-height: 0; aspect-ratio: 1 / 1.08; }
  .place { padding: 16px; }
  .place .label { margin-bottom: 8px; }
  .route { min-height: 40px; margin-bottom: 10px; }
  .route .coord { display: none; }
  .city { font-size: 21px; }
  .place .from-line { font-size: 13.5px; }
  .projects { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .exp-head { grid-template-columns: minmax(0, 1fr); }
  .axis { display: none; }
  .xp-grid { --cols: 84px minmax(0, 1fr) 18px; }
  .xp summary {
    grid-template-columns: var(--cols);
    grid-template-areas: "role role icon" "yr track track";
    gap: 10px 14px;
    padding: 14px 2px;
  }
  .xp summary::after { align-self: start; margin-top: 5px; }
  .xp .yr { font-size: 13px; }
  .xp .more { padding: 0 2px 18px; max-width: none; }
  .xp-list { margin-top: 20px; border-top: 1px solid var(--line); }
  .skill-cols { grid-template-columns: minmax(0, 1fr); }
  .about {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "ahead" "spain" "agri" "vegan" "career";
  }
  .contact { grid-template-columns: minmax(0, 1fr); }
  .cform .pair { grid-template-columns: minmax(0, 1fr); }
  .writing a { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .writing a small { grid-column: 1; }

  .prose { font-size: 16.5px; }
  .fm-intro, .fm-art { grid-column: 1 / -1; }
  .fm-intro { min-height: 0; gap: 28px; }
  .fm-art { aspect-ratio: 16 / 10; }
  .fm .cols { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .example { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .fm-value dl > div { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 11 motion: one reveal, driven by scrolling ---------- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  @supports (animation-timeline: view()) {
    .meter i, .track i {
      animation: grow linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }
  }
}
@keyframes grow { from { transform: scaleX(0); } }

/* The Languages tile sits on the first screen, where a scroll-driven reveal never
   shows, so its bars fill once on load, one after another, and the scores follow. */
@media (prefers-reduced-motion: no-preference) {
  .lang .meter i { animation: grow 1s cubic-bezier(.25, .8, .25, 1) .35s both; }
  .lang .score { animation: score-in .5s ease .7s both; }
  .lang .scale > div:nth-child(2) .meter i { animation-delay: .5s; }
  .lang .scale > div:nth-child(2) .score { animation-delay: .85s; }
  .lang .scale > div:nth-child(3) .meter i { animation-delay: .65s; }
  .lang .scale > div:nth-child(3) .score { animation-delay: 1s; }
  .lang .scale > div:nth-child(4) .meter i { animation-delay: .8s; }
  .lang .scale > div:nth-child(4) .score { animation-delay: 1.15s; }
}
@keyframes score-in { from { opacity: 0; transform: translateX(-4px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}