/* The portfolio's styles, taken as they are from the approved single-file site. */

  /* Same brand as the case-study decks (Frost Paper + grain). Every shape on the page is a honeycomb cell.
     Three views in one file: home (#/), a project (#/<id>) and one change of a project (#/<id>/<date>-<n>). */
  :root {
    --bg: #eeece8; --band: #f6f5f2; --white: #ffffff; --ink: #161514; --text: #5f5b55; --muted: #8a857d;
    --line: #dcd8d0; --line-soft: #e8e5df; --accent: #f05a1a; --accent-ink: #c2410c; --tint: #fde4d6;
    --display: 'Host Grotesk', sans-serif; --body: 'Funnel Sans', sans-serif; --mono: 'JetBrains Mono', monospace;
    --ease: cubic-bezier(.2, .8, .2, 1);
    --paper: transparent; --paper-line: #dcd8d0;                                      /* one background: blocks are drawn by a line, never a fill */
  }
  * { box-sizing: border-box; }
  html { background-color: var(--bg);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .16  0 0 0 0 .12  0 0 0 0 .08  0 0 0 .16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
      radial-gradient(60% 40% at 96% 0%, rgba(240,90,26,.10) 0%, transparent 60%);
    background-size: 220px 220px, 100% 100%; background-repeat: repeat, no-repeat; }
  body { margin: 0; color: var(--text); font: 400 17px/1.6 var(--body); overflow-x: hidden; }
  a { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: 3px; }
  a:hover { text-decoration-color: var(--ink); }
  :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
  .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
  h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); font-weight: 700; margin: 0; }
  .draft { border: 1.5px dashed var(--muted); border-radius: 8px; padding: 0 7px; color: var(--muted); font-size: .88em; }
  .btn { font: 600 15px var(--body); color: var(--ink); background: var(--white); border: 1.5px solid var(--line); border-radius: 999px; padding: 8px 16px; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
  .btn:hover { border-color: var(--ink); }
  .btn.solid { background: var(--ink); color: #faf9f5; border-color: var(--ink); }
  .ghost { font: 600 14px var(--body); color: var(--ink); background: var(--white); border: 1.5px solid var(--line); border-radius: 999px; padding: 6px 13px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
  .ghost:hover:not(:disabled) { border-color: var(--ink); }
  .ghost:disabled, .ghost.off { opacity: .4; cursor: default; pointer-events: none; }
  .tag { font: 500 13px var(--mono); color: var(--text); background: var(--white); border: 1.5px solid var(--line); border-radius: 999px; padding: 3px 10px; }
  .e-type { font: 500 12px var(--mono); color: var(--accent-ink); background: var(--tint); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }

  /* ---- honeycomb pieces: margin spots where bees land, the garden ---- */
  .bay { position: relative; }
  .spot { position: absolute; overflow: visible; pointer-events: none; }
  .spot polygon { fill: url(#hg0); stroke: #cbc5bb; stroke-width: 1.3; stroke-linejoin: round; transition: fill .6s, stroke .6s; }
  .spot polygon.bee { fill: url(#hg1); stroke: #f4bf9f; }
  .spot polygon.still { fill: url(#hg2); stroke: #ec8f5c; }
  #garden { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; pointer-events: none; }
  #garden svg { position: absolute; top: 0; overflow: visible; }
  .bloom .petals { transform-box: fill-box; transform-origin: center; transition: transform .7s var(--ease), filter .7s; }
  .bloom.bee .petals { transform: scale(1.14); filter: saturate(1.25) brightness(1.04); }
  .bloom.still .petals { transform: scale(1.1); }
  #bees, #bees-under { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; }
  #bees { z-index: 20; }                                                              /* a bee flying over the page ... */
  #bees-under { z-index: 0; } #app { position: relative; z-index: 1; }                /* ... or under it: behind the text and cards, above the background */

  /* ---- no header: inner pages get one line back to where they came from ---- */
  /* where you are: a vine that grows from Home, one branch per level, stepping right and down; it sits at the top and scrolls with the page */
  .crumb { position: relative; padding-top: 30px; }
  .crumb:empty { display: none; }
  .crumb .cr { position: relative; }
  .crumb:empty { display: none; }
  .crumb svg { position: absolute; inset: 0; overflow: visible; }
  .crumb .vine { fill: none; stroke: #a9ad95; stroke-width: 1.7; stroke-linecap: round; }
  .crumb .leaf { fill: #bcc3a6; }
  .crumb .node { fill: var(--bg); stroke: #a9ad95; stroke-width: 1.5; stroke-linejoin: round; }
  .crumb .node.here { fill: url(#hg3); stroke: #dd5e22; }
  .crumb a, .crumb b { position: absolute; display: block; height: 26px; line-height: 26px; padding: 0 11px; border-radius: 999px; white-space: nowrap; max-width: 440px; overflow: hidden; text-overflow: ellipsis;
    font: 600 14px/26px var(--body); color: var(--text); text-decoration: none; }
  .crumb a:hover { color: var(--ink); }
  .crumb b { color: var(--ink); font-weight: 700; }

  /* ---- sidebar + main column ---- */
  .layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 60px; padding-top: 48px; padding-bottom: 40px; }
  .side { position: sticky; top: 40px; align-self: start; display: flex; flex-direction: column; gap: 18px; }
  main { display: flex; flex-direction: column; gap: 76px; min-width: 0; }
  /* enlarge: a change read without the sidebar, on the full width */
  .layout.wide { grid-template-columns: minmax(0, 1fr); }
  .layout.wide .side { display: none; }
  .layout.wide .cell.text, .layout.wide .cell.title, .layout.wide .cell.quote { max-width: 800px; }
  .cell.title { position: relative; }
  .enlarge { position: absolute; top: 4px; right: 0; display: inline-flex; align-items: center; gap: 7px; }
  .enlarge svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .cell.title:has(.enlarge) h2 { padding-right: 130px; }
  .sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
  .sec-h h2 { font-size: 24px; letter-spacing: -.01em; }

  /* who I am (home sidebar) */
  .me-name { font-size: 34px; line-height: .98; letter-spacing: -.025em; }
  .me-name span { display: block; white-space: nowrap; }             /* two lines at every size, so shrinking never re-wraps it */
  /* home hero: the first screen, wider than the page. Nothing resizes on scroll: pieces only move and hand over. */
  .hero-me { position: fixed; left: 0; top: 0; z-index: 2; display: none; flex-direction: column; gap: 30px; pointer-events: none; }
  .hero-me.on { display: flex; }
  .hero-me .n { font: 700 76px/.96 var(--display); letter-spacing: -.035em; color: var(--ink); white-space: nowrap; }
  .hero-me .q { margin: 0; font: 400 22px/1.55 var(--body); color: var(--text); }
  .hero-me .q b, .pitch b { font-weight: 600; color: var(--ink); }                 /* the first sentence leads, the rest supports it */
  .act-top { position: relative; z-index: 3; }
  .act-top.forming .hive polygon { visibility: hidden; }                       /* the swarm is drawing these cells right now */
  .act-top.forming .sec-h, .act-top.forming .cal { opacity: var(--fa, 1); }
  #swarm { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 4; pointer-events: none; display: none; overflow: visible; }
  #swarm.on { display: block; }
  #swarm polygon { transition: none; transform-box: view-box; transform-origin: 0 0; vector-effect: non-scaling-stroke; }
  #swarm .breath { pointer-events: none; }
  .pitch { margin: 0; font-size: 16px; line-height: 1.6; }

  /* project metadata (project sidebar) */
  .meta { margin: 0; display: flex; flex-direction: column; gap: 22px; }
  .meta dt { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
  .meta dd { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.45; }
  .meta .stack { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 22px; border-top: 1.5px dashed var(--line); }
  .meta .mlinks { display: flex; flex-wrap: wrap; gap: 8px; }
  .meta .mlinks .btn { font-size: 14px; padding: 6px 13px; }
  .tl { position: relative; display: flex; flex-direction: column; }
  .tl::before { content: ''; position: absolute; left: 8.5px; top: 34px; bottom: 14px; border-left: 1.5px dashed var(--line); }
  .tl-day { font: 500 12px var(--mono); color: var(--muted); padding: 16px 0 6px 30px; }
  .tl-day:first-child { padding-top: 0; }
  .tl a { position: relative; display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; padding: 7px 0; font: 600 14px/1.4 var(--body); color: var(--text); text-decoration: none; }
  .tl a svg { margin-top: 1px; overflow: visible; }
  .tl a .hx { stroke: #cbc5bb; stroke-width: 1.3; }
  .tl a .hx.lv3 { stroke: #dd5e22; }
  .tl a:hover, .tl a.on { color: var(--ink); }

  /* home: projects as a text index. Hovering draws a honeycomb behind the row, outward from the pointer: the cells keep the
     page's own colour, only the seams light up (orange where the pointer is, following it), and the comb fades at its edges. */
  .works { display: flex; flex-direction: column; }
  .work { position: relative; isolation: isolate; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 24px; gap: 0 24px; align-items: start;
    padding: 28px 28px 30px; border-top: 1.5px solid var(--line); text-decoration: none; transition: border-color .3s; }
  .work:last-child { border-bottom: 1.5px solid var(--line); }
  .wbg { position: absolute; inset: -1.5px 0; z-index: -1; overflow: hidden; pointer-events: none;      /* the comb fades out toward every edge */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
    mask-composite: intersect; }
  .wcomb { display: block; }
  .wcomb polygon { fill: none; stroke-width: 2; stroke-linejoin: round; transform-box: fill-box; transform-origin: center;
    transform: scale(.3); opacity: 0; transition: transform .5s cubic-bezier(.3, 1.5, .5, 1), opacity .3s; }
  .work.lit .wcomb polygon { transform: none; opacity: 1; }
  .work.lit, .work.lit + .work { border-color: transparent; }
  .work.lit:last-child { border-bottom-color: transparent; }
  .work svg.wm { margin-top: 7px; overflow: visible; }
  .work .hx { stroke: #b9b3a9; stroke-width: 1.4; transition: fill .35s, stroke .35s; }
  .work.lit .hx { fill: url(#hg3); stroke: #dd5e22; }
  .work h3 { font-size: 26px; line-height: 1.2; letter-spacing: -.015em; }
  .work p { margin: 8px 0 0; font-size: 16px; line-height: 1.6; max-width: 40em; color: var(--text); transition: color .3s;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .work small { font: 500 12px var(--mono); color: var(--muted); padding-top: 10px; white-space: nowrap; }
  .work i { font-style: normal; font-size: 20px; color: var(--muted); padding-top: 3px; transition: transform .35s var(--ease), color .3s; }
  .work.lit p { color: #4a4641; }
  .work.lit i { color: var(--ink); transform: translateX(6px); }
  .work:focus-visible { outline-offset: 4px; }

  /* ---- the tracking calendar (GitHub-style, in honeycomb) ---- */
  .cal { background: var(--paper); border: 1.5px solid var(--paper-line); border-radius: 22px; overflow: hidden; }
  .hive-area { padding: 20px 22px 12px; min-width: 0; }
  .cal-row { display: flex; align-items: flex-start; position: relative; }
  .scroller { flex: 1; min-width: 0; overflow-x: auto; padding: 4px 4px 10px; scrollbar-width: none; display: flex; scroll-behavior: smooth; }   /* no scrollbar: the arrows navigate */
  .scroller::-webkit-scrollbar { display: none; }
  .cal-nav { display: flex; justify-content: flex-end; gap: 2px; margin: -6px 0 2px; }                /* two small arrows, side by side, above the cells */
  .cal-arrow { width: 26px; height: 26px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; transition: color .2s, background .2s; }
  .cal-arrow:hover:not(:disabled) { color: var(--ink); background: var(--white); }
  .cal-arrow:disabled { opacity: .3; cursor: default; }
  .cal-arrow svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .wdays { position: relative; flex: none; width: 40px; margin-top: 4px; font: 500 11px var(--mono); color: var(--muted); }   /* beside the scroller, so the cells never slide under it */
  .wdays span { position: absolute; left: 0; transform: translateY(-50%); }
  .hive { display: block; flex: none; overflow: visible; }
  .hive text { font: 500 12px var(--mono); fill: var(--muted); }
  .hive text.yr { font: 700 15px var(--display); fill: var(--ink); letter-spacing: -.01em; }
  .hx { fill: url(#hg0); stroke: #dcd7cf; stroke-width: 1.1; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; transition: transform .18s var(--ease), fill .5s, stroke .5s; }
  .hx.lv1 { fill: url(#hg1); stroke: #f4bf9f; } .hx.lv2 { fill: url(#hg2); stroke: #ec8f5c; } .hx.lv3 { fill: url(#hg3); stroke: #dd5e22; } .hx.lv4 { fill: url(#hg4); stroke: #a8360a; }
  .hx.future { fill: #f7f5f1; stroke: #e7e3dc; stroke-width: 1.1; }
  .hx.today { stroke: var(--ink); stroke-width: 1.6; }
  .hx[data-day] { cursor: pointer; }
  .hx[data-day]:hover, .hx[data-day]:focus-visible { transform: scale(1.2); outline: none; }
  .hx[data-day]:focus-visible { stroke: var(--accent); stroke-width: 2.5; }
  .hx.sel { stroke: var(--ink); stroke-width: 2.5; }

  /* pagination: one small hexagon per page, the current one filled; no words */
  .pg { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 18px; }
  .pg button { width: 30px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; border-radius: 8px; }
  .pg svg { overflow: visible; }
  .pg polygon { fill: transparent; stroke: #bdb7ad; stroke-width: 1.5; transition: fill .25s, stroke .25s, transform .3s var(--ease); transform-box: fill-box; transform-origin: center; }
  .pg button:hover polygon { stroke: var(--ink); transform: scale(1.15); }
  .pg button[aria-current] polygon { fill: var(--ink); stroke: var(--ink); }
  .paged > * { animation: rise .45s var(--ease) both; }
  .paged > :nth-child(2) { animation-delay: .04s; } .paged > :nth-child(3) { animation-delay: .08s; } .paged > :nth-child(4) { animation-delay: .12s; } .paged > :nth-child(5) { animation-delay: .16s; }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } }

  /* the feed under the calendar: what was done, day by day; a picked day narrows it */
  .feed { margin-top: 26px; }
  .feed-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
  .ghost.x { width: 32px; height: 32px; padding: 0; justify-content: center; font-size: 13px; }
  .feed-h h3 { font-size: 17px; }
  .f-day { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 0 18px; padding: 14px 0; border-top: 1.5px dashed var(--line); }
  .f-date { font: 500 13px/1.3 var(--mono); color: var(--muted); padding-top: 13px; }
  .f-rows { display: flex; flex-direction: column; gap: 8px; }
  .f-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 11px 16px; background: var(--paper); border: 1.5px solid var(--paper-line); border-radius: 14px; text-decoration: none; transition: border-color .2s; }
  .f-row:hover { border-color: var(--ink); }
  .f-row b { font: 600 15px/1.35 var(--body); color: var(--ink); }
  .f-row .e-type { min-width: 66px; text-align: center; }                     /* titles line up whatever the type */
  .f-row b small { display: block; font: 500 12px var(--mono); color: var(--muted); margin-bottom: 2px; }
  .f-row i { font-style: normal; color: var(--muted); }
  .f-row:hover i { color: var(--ink); }
  .f-empty { padding: 18px 0; border-top: 1.5px dashed var(--line); color: var(--muted); font-size: 15px; }

  /* ---- a project page ---- */
  .p-head h1 { font-size: clamp(34px, 4.6vw, 50px); line-height: 1.04; letter-spacing: -.025em; }
  .p-head p { margin: 16px 0 0; font-size: 19px; line-height: 1.6; color: var(--ink); max-width: 36em; }
  .cover { margin: 0; border: 0; overflow: visible; } .cover::before { display: none; }
  .cover img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line); }

  /* ---- cells: the story of a project or a change, one block per Markdown block ----
     Text sits straight on the page. Everything that is data (code, a diff, a table, an image) sits on
     paper: translucent, so the grain shows through, with a faint honeycomb fading in from its top-right corner. */
  .cells { display: flex; flex-direction: column; gap: 34px; }
  .cell.text, .cell.title, .cell.quote { width: 100%; max-width: 640px; margin-inline: auto; }   /* reading width, centred under the wider blocks */
  .cell { position: relative; margin: 0; min-width: 0; }
  .surf { position: relative; isolation: isolate; background: var(--paper); border: 1.5px solid var(--paper-line); border-radius: 20px; overflow: hidden; }
  .surf::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='20.78'><path d='M0 10.39 6 0h12l6 10.39-6 10.39H6zM24 10.39h12' fill='none' stroke='rgba(150,124,98,.2)' stroke-width='1'/></svg>");
    -webkit-mask-image: radial-gradient(120% 90% at 100% 0, #000, transparent 55%); mask-image: radial-gradient(120% 90% at 100% 0, #000, transparent 55%); }
  .cell.title h2 { font-size: clamp(30px, 4vw, 42px); line-height: 1.08; letter-spacing: -.02em; }
  .cell.title h3 { font-size: 28px; line-height: 1.18; letter-spacing: -.015em; }
  .cell.title.d2 { margin-top: 26px; }
  .cell.title.d2:first-child { margin-top: 0; }
  .cell.title .when { display: none; margin: 0 0 8px; font: 500 13px var(--mono); color: var(--muted); }   /* phones only: there the timeline sits below */

  /* code: light, on paper; a diff marks its lines, added in warm tint, removed quieter */
  .cell.code pre { margin: 0; padding: 22px 26px; overflow-x: auto; font: 500 14px/1.75 var(--mono); color: #2a2826; tab-size: 4; }
  .cell.code code { font: inherit; }
  .hljs-keyword, .hljs-built_in, .hljs-literal { color: var(--accent-ink); } .hljs-string, .hljs-attr { color: #8a5a2b; } .hljs-number { color: #b8400e; }
  .hljs-comment { color: #9a948b; font-style: italic; } .hljs-title, .hljs-name { color: var(--ink); font-weight: 700; }
  .cell.diff pre { padding: 14px 0; }
  .dl { display: grid; grid-template-columns: 42px minmax(0, 1fr); padding-right: 26px; }
  .dl > span { white-space: pre-wrap; overflow-wrap: anywhere; }                     /* long lines wrap instead of hiding off the edge */
  .dl em { font-style: normal; }
  .dl i { font-style: normal; text-align: center; color: #b5aea4; user-select: none; }
  .dl.add { box-shadow: inset 3px 0 0 var(--accent); color: var(--ink); }
  .dl.add i { color: var(--accent-ink); font-weight: 700; }
  .dl.del { color: #a39d94; } .dl.del i { color: #b5aea4; }
  .dl.del em { text-decoration: line-through; text-decoration-color: rgba(163, 157, 148, .55); }

  /* a table: on paper, numbers line up, rows split by dashed seams */
  .cell.table { padding: 8px 26px 12px; }
  .cell.table .md { max-width: none; overflow-x: auto; }
  .cell.table table { border-collapse: collapse; width: 100%; font-size: 15px; font-variant-numeric: tabular-nums; }
  .cell.table th { font: 500 12px var(--mono); color: var(--muted); text-align: left; padding: 14px 18px 10px 0; white-space: nowrap; }
  .cell.table td { padding: 12px 18px 12px 0; border-top: 1.5px dashed var(--line); color: var(--ink); vertical-align: top; }
  .cell.table td:first-child { font-weight: 600; white-space: nowrap; }

  /* a quote: no box, set larger, a hollow hexagon in front */
  .cell.quote { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 18px; }
  .cell.quote svg { margin-top: 6px; overflow: visible; }
  .cell.quote polygon { fill: none; stroke: #c9c2b7; stroke-width: 1.5; }
  .cell.quote .md { font: 500 21px/1.5 var(--display); color: var(--ink); letter-spacing: -.005em; }
  .cell.quote blockquote { margin: 0; } .cell.quote p { margin: 0; }

  /* an image, on a paper mat */
  .cell.image { border: 0; overflow: visible; } .cell.image::before { display: none; }          /* images: no frame, just rounded corners */
  .cell.image img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line); }
  .cell.image figcaption { padding: 12px 2px 0; font-size: 14px; color: var(--muted); }
  @media (min-width: 1200px) { .cell.image, .cover { margin-inline: -32px; } }               /* wider than the text on both sides, clear of the sidebar */

  /* a change: earlier / later at the end, on paper */
  .pn { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; }
  .pn a { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; background: var(--paper); border: 1.5px solid var(--paper-line); border-radius: 16px; text-decoration: none; transition: border-color .25s; }
  .pn a:hover { border-color: var(--ink); }
  .pn a.next { text-align: right; grid-column: 2; }
  .pn small { font: 500 12px var(--mono); color: var(--muted); }
  .pn b { font: 600 15px/1.35 var(--body); color: var(--ink); }

  /* contact, at the end of the home page: the same comb as the project rows. The cells keep the page's colour, only the seams
     show, the orange glow follows the pointer (and rests on the first link), and the comb fades at its edges. */
  .contact { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); align-items: center; gap: 24px; }
  .contact h2 { font-size: clamp(40px, 5vw, 58px); line-height: 1; letter-spacing: -.03em; }
  .ccomb { position: relative; container-type: inline-size; aspect-ratio: 480 / 330;
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, transparent 100%); }
  .ccomb svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .ccomb polygon { fill: none; stroke-width: 2; stroke-linejoin: round; transition: stroke-width .3s; }
  .ccomb polygon.on { stroke: #f08a50; stroke-width: 3.2; }
  .cl { position: absolute; display: grid; place-items: center; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); text-decoration: none; }
  .cl span { font: 600 clamp(12px, 3.3cqw, 16px)/1.25 var(--body); color: var(--ink); text-align: center; padding: 0 8%; transition: color .25s, transform .35s var(--ease); }
  a.cl:hover span, a.cl:focus-visible span { color: var(--accent-ink); transform: scale(1.06); }
  a.cl:focus-visible { outline: none; }
  .cl.todo span { color: var(--muted); font-weight: 500; }                          /* a link still to fill */

  /* Markdown inside text cells: straight on the page, set for reading */
  .md { color: #2b2927; font-size: 17px; }
  .md > * { margin: 16px 0 0; }
  .md > :first-child { margin-top: 0; }
  .md h3, .md h4 { font-size: 19px; margin-top: 30px; color: var(--ink); }
  .md p, .md li { line-height: 1.55; }
  .md strong { color: var(--ink); }
  .md ul, .md ol { padding-left: 22px; }
  .md li + li { margin-top: 8px; }
  .md li::marker { color: #b5aea4; }
  .md :not(pre) > code { font: 500 .84em var(--mono); background: var(--paper); border: 1.5px solid var(--paper-line); border-radius: 6px; padding: 1px 6px; }
  .md a { text-decoration-color: var(--accent); }
  .md img { max-width: 100%; border-radius: 14px; display: block; }

  .notice { margin: 80px auto; max-width: 640px; background: var(--white); border: 1.5px solid var(--line); border-radius: 18px; padding: 28px; color: var(--ink); }
  .notice code { font: 500 14px var(--mono); background: var(--band); padding: 2px 6px; border-radius: 6px; }
  footer { margin-top: 40px; padding: 28px 0 70px; border-top: 1.5px dashed var(--line); color: var(--muted); font-size: 14px; display: flex; justify-content: space-between; gap: 12px; }

  @media (max-width: 860px) {
    .layout { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 36px; }
    .crumb { padding-top: 22px; } .crumb a, .crumb b { max-width: 190px; font-size: 13px; }
    .side { position: static; }
    .me-name { font-size: 56px; }
    .layout[data-view="project"] .side { order: 2; }          /* on a phone, a project's metadata comes after its content */
    main { gap: 56px; }
    .cells { gap: 26px; }
    .pn { grid-template-columns: 1fr; } .pn a.next { grid-column: 1; }
    .cell.title .when { display: block; }
    .enlarge { display: none; } .cell.title:has(.enlarge) h2 { padding-right: 0; }
    .cell.table { padding-left: 20px; padding-right: 20px; } .cell.code pre { padding: 18px 20px; } .md { font-size: 17px; }
    .hive-area { padding: 16px; }
    .f-day { grid-template-columns: 1fr; gap: 8px; } .f-date { padding-top: 0; }
    .f-row { grid-template-columns: minmax(0, 1fr) auto; } .f-row .e-type { display: none; }
    .contact { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .work { grid-template-columns: 20px minmax(0, 1fr) 20px; gap: 0 16px; padding: 22px 16px 24px; } .work small { display: none; }
    .work h3 { font-size: 21px; }
  }
  @media (prefers-reduced-motion: reduce) { .paged > * { animation: none !important; } .hx, .spot polygon, .bloom .petals, .wcomb polygon, .ccomb polygon { transition: none !important; } }