/* covibes: the line, the team's project drawn by hand under it, and post-its
   around both. The Open Engine's paper, ink and notes, as on zeroshot.sh. */

:root {
  --paper: #faf7f1;
  --paper-lit: #fffcf6;
  --ink: #171411;
  --ink-2: #4a433a;
  --muted: #6f675a;
  --rust: #c2240c;
  --hairline: #e4ded3;
  --marker-ink: #26221c;
  --note-text: #3a3120;

  --marker: "Reenie Beanie", "Bradley Hand", "Marker Felt", cursive;
  --hand: "Caveat", "Bradley Hand", "Marker Felt", cursive;
  --ui: "Spline Sans", "Geist", system-ui, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", menlo, monospace;

  --x: clamp(1.25rem, 6vw, 4.5rem);
  --section-space: clamp(2.5rem, 5vw, 4rem);
}

*, *::before, *::after { box-sizing: border-box; }
/* html holds the flat colour, so the blended layers below paint on body. */
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; min-height: 100svh; display: flex; flex-direction: column;
  color: var(--ink); font-family: var(--ui); font-size: 1rem; line-height: 1.5;
  overflow-x: hidden; font-synthesis: none; text-rendering: optimizeLegibility;
  /* The page stock: a fine tooth, and a much larger cloud tile so the tone is
     never quite even, both multiplied over the brightest the sheet gets. It
     scrolls with the page, as paper would. */
  background: url("textures/paper-page.webp") 0 0 / 256px 256px, url("textures/paper-mottle.webp") 0 0 / 1390px 1390px, var(--paper-lit);
  background-blend-mode: multiply;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
code { font-family: var(--mono); font-size: 0.88em; }
::selection { background: var(--rust); color: var(--paper); }

.marker { font-family: var(--marker); font-weight: 400; color: var(--marker-ink); }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--ink); color: var(--paper); padding: 0.5rem 0.9rem; font-size: 0.75rem; }
.skip-link:focus { top: 1rem; }
.shell { padding-inline: var(--x); }
:where(a, summary):focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }
.defs { position: absolute; width: 0; height: 0; }

/* Masthead: the crow and the name, who makes it, and the one ask. */
.masthead { position: relative; z-index: 30; display: flex; align-items: center; gap: 1rem; padding-block: clamp(0.9rem, 2vh, 1.4rem); border-bottom: 1px solid var(--hairline); }
.lockup { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.crow { width: 2.25rem; height: auto; transform: rotate(-2deg); }
.lockup-product { font-size: 2rem; line-height: 1; color: var(--ink); transform: rotate(-1.5deg); }
.lockup-name { font-family: var(--ui); font-size: 0.78rem; color: var(--muted); text-decoration: none; }
.lockup-name:hover { color: var(--rust); }
/* The ask, quiet up here: the hero holds the button. The padding is the hit area, not a box. */
.masthead-call { margin-left: auto; display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2.75rem; padding-inline: 0.3rem; font-size: 0.85rem; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; }
.masthead-call:hover { color: var(--rust); }

/* Marker underline: two ink scratches and one rust pass that draws once. */
.u { position: relative; display: inline-block; white-space: nowrap; }
.nw { white-space: nowrap; }
.u-svg { position: absolute; left: -2%; bottom: -0.12em; width: 104%; height: 0.26em; pointer-events: none; overflow: visible; }
.u-ink { fill: none; stroke: var(--marker-ink); stroke-width: 1.8; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.u-ink--2 { stroke-width: 1.4; opacity: 0.9; }
.u-rust { fill: none; stroke: var(--rust); stroke-width: 2; stroke-linecap: round; opacity: 0.82; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .line .u-rust { stroke-dashoffset: 100; animation: oeDraw 0.55s ease-out 0.35s forwards; }
  @keyframes oeDraw { to { stroke-dashoffset: 0; } }
}

/* The wall: the line and the project in the middle, notes stuck around them. */
main { flex: 1; }
.wall {
  min-height: calc(100svh - 4.6rem); width: 100%; max-width: 84rem; margin-inline: auto;
  padding-block: clamp(1rem, 2vh, 1.5rem) var(--section-space);
  display: grid; align-content: center; justify-items: center; gap: clamp(2.5rem, 6vh, 4rem);
}
.center { display: flex; flex-direction: column; align-items: center; gap: clamp(1.25rem, 2.8vh, 1.75rem); text-align: center; width: 100%; }
/* No measure cap: each sentence holds its own line, and a narrow screen breaks the first only before "your team". */
.line { font-size: clamp(2.5rem, 4vw, 3.25rem); line-height: 1.06; margin: 0; text-wrap: balance; }
.actions { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; max-width: 100%; }
.actions-claim { max-width: 34rem; margin: 0 auto; font-size: 1.05rem; color: var(--ink-2); text-wrap: balance; }
.actions-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.6rem 1.1rem; margin: 0.2rem 0 0; }
.actions-links a { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2.4rem; padding: 0 1rem; border: 1px solid var(--hairline); border-radius: 0.35rem; font-size: 0.9rem; color: var(--ink); text-decoration: none; white-space: nowrap; }
.actions-links a:hover { border-color: var(--rust); color: var(--rust); }
.actions-links a.is-primary { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.actions-links a.is-primary:hover { border-color: var(--rust); background: var(--rust); color: var(--paper); }

/* The drawings, in the pen of zeroshot.sh's graphs: ink on the page stock,
   Caveat for the hand, rust for what goes wrong and what moves. Longhands
   only, as in the reference stylesheet. */
.drawing { display: block; height: auto; overflow: visible; mix-blend-mode: multiply; }
.drawing path { fill: none; stroke: var(--marker-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.drawing path.thick { stroke-width: 5; }
.drawing text { font-family: var(--hand); font-weight: 600; fill: var(--marker-ink); }
.drawing text.aside, .drawing .aside text { fill: var(--ink-2); }
/* White under multiply is the page stock: the app is the one sheet on the wall. */
.drawing .sheet > path { fill: #fff; }
.drawing .frame path { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 14 10; }
.drawing .frame text { fill: var(--muted); }
.drawing .node-mark path { stroke-width: 2.2; }
.drawing .node-mark .disc { fill: #fff; stroke: none; }

/* The project under the line: three teammates, their agents, the app they
   build. Ink stays put; a rust dot runs the work
   through it, and the parts it wakes are outlined in rust. Paused until on
   screen. */
.project { width: min(100%, 38rem); }
.project-caption { max-width: 40ch; margin: 0; font-size: 0.94rem; line-height: 1.6; color: var(--ink-2); text-wrap: balance; }
.project--tall { display: none; }
.project .mark path { stroke: var(--rust); stroke-width: 3.4; }
.project .mark path.thick { stroke-width: 5; }
.project .pulse path { stroke: var(--rust); stroke-width: 13; stroke-dasharray: 0.001 2; stroke-dashoffset: 0.05; }
.project--tall .pulse path { stroke-width: 10; }
.project .mark { opacity: 0; }
.project .pulse path, .project .mark { animation-timing-function: linear; animation-iteration-count: infinite; animation-play-state: paused; }
.project.is-playing .pulse path, .project.is-playing .mark { animation-play-state: running; }
/* project-run:start. Written by scripts/draw-diagrams.py from the run it draws; edit the run there. */
.project .pulse path, .project .mark { animation-duration: 8s; }
.project .p-0 path { animation-name: projectDot0; }
@keyframes projectDot0 { 0%, 0% { stroke-dashoffset: 0.05; } 8.75%, 100% { stroke-dashoffset: -1.02; } }
.project .p-1 path { animation-name: projectDot1; }
@keyframes projectDot1 { 0%, 0% { stroke-dashoffset: 0.05; } 8.75%, 100% { stroke-dashoffset: -1.02; } }
.project .p-2 path { animation-name: projectDot2; }
@keyframes projectDot2 { 0%, 0% { stroke-dashoffset: 0.05; } 8.75%, 100% { stroke-dashoffset: -1.02; } }
.project .p-3 path { animation-name: projectDot3; }
@keyframes projectDot3 { 0%, 32.5% { stroke-dashoffset: 0.05; } 42.5%, 100% { stroke-dashoffset: -1.02; } }
.project .p-4 path { animation-name: projectDot4; }
@keyframes projectDot4 { 0%, 32.5% { stroke-dashoffset: 0.05; } 42.5%, 100% { stroke-dashoffset: -1.02; } }
.project .p-5 path { animation-name: projectDot5; }
@keyframes projectDot5 { 0%, 32.5% { stroke-dashoffset: 0.05; } 42.5%, 100% { stroke-dashoffset: -1.02; } }
.project .m-agents { animation-name: projectAgents; }
@keyframes projectAgents { 0%, 9.38% { opacity: 0; } 12.5%, 31.25% { opacity: 1; } 34.38%, 100% { opacity: 0; } }
.project .m-built { animation-name: projectBuilt; }
@keyframes projectBuilt { 0%, 43.12% { opacity: 0; } 46.25%, 90% { opacity: 1; } 93.12%, 100% { opacity: 0; } }
/* project-run:end */
@media (prefers-reduced-motion: reduce) {
  .project .pulse { display: none; }
  .project .mark { animation-name: none; }
}

/* Post-its */
.notes { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 46rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 4vw, 2rem); align-items: start; }
.note { position: relative; }
.notes > .note:nth-child(1) { --r: -4deg; }
.notes > .note:nth-child(2) { --r: 2.5deg; --dy: 10px; --cut: -71px -113px; }
.notes > .note:nth-child(3) { --r: -1.5deg; --dy: 6px; --cut: -193px -37px; }
.notes > .note:nth-child(4) { --r: 3.5deg; --cut: -127px -211px; }
.tone-0 { --note-top: #fff7a1; --note-mid: #fdeb6d; --note-bottom: #f5da4c; }
.tone-1 { --note-top: #fff9b8; --note-mid: #fcef86; --note-bottom: #f3df5e; }
.note-paper {
  position: relative; isolation: isolate; min-height: 10.5rem; padding: 1.15rem 1rem 1rem;
  transform: rotate(var(--r, 0deg)) translate(0, var(--dy, 0px));
  transition: transform 220ms cubic-bezier(.2,.7,.2,1);
}
/* The sheet: paper tooth over the note colour, a duller band where the glue
   holds it flat, and a lighter one where the free end bows toward the light. */
.note-paper::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-bottom-right-radius: 5rem 0.3rem;
  background:
    url("textures/paper-note.webp") var(--cut, 0 0) / 256px 256px,
    linear-gradient(177deg, rgba(255,249,180,0) 66%, rgba(255,249,180,0.30) 90%, rgba(255,249,180,0.06) 100%),
    linear-gradient(180deg, rgba(23,20,17,0.075) 0, rgba(23,20,17,0.035) 0.9rem, rgba(23,20,17,0) 1.7rem),
    linear-gradient(165deg, var(--note-top) 0%, var(--note-mid) 48%, var(--note-bottom) 100%);
  background-blend-mode: multiply, normal, normal, normal;
  box-shadow: 0 1px 1px rgba(23,20,17,0.10), 1px 3px 5px -2px rgba(23,20,17,0.16);
}
/* Its shadow. Nothing under the glue; it opens toward the lifted corner,
   away from the light at the upper left. */
.note-paper::after {
  content: ""; position: absolute; z-index: -2; left: 16%; right: 0.55rem; bottom: 0.75rem; height: 45%;
  box-shadow: 0.4rem 0.75rem 0.8rem rgba(23,20,17,0.34);
  transform: rotate(1.6deg); transform-origin: 0 100%;
  transition: box-shadow 220ms ease-out;
}
.note-q { display: block; margin: 0; text-transform: uppercase; font-size: clamp(1.35rem, 1.9vw, 1.65rem); line-height: 1.08; text-wrap: balance; }
.note-a { position: relative; margin: 0.75rem 0 0; font-size: 0.92rem; line-height: 1.45; color: var(--note-text); }
.note-a code { font-size: 0.78rem; background: rgba(255,255,255,0.5); padding: 0.05em 0.3em; overflow-wrap: anywhere; }
/* A full tap target; the negative margins give the line back its own height. */
.note-a a { display: inline-flex; align-items: center; min-height: 2.75rem; margin-block: calc((2.75rem - 1.45em) / -2); color: var(--rust); white-space: nowrap; }

/* Wide screens: notes pinned either side of the line. */
@media (min-width: 1180px) {
  .wall { grid-template-columns: 15rem minmax(0, 1fr) 15rem; column-gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
  .center { grid-column: 2; grid-row: 1; }
  /* Between the notes the column is 90vw - 39rem wide until the wall stops
     growing, and the first sentence runs about 10.5 times its type size: the
     line shrinks with the column, so each sentence still holds its own line. */
  .line { font-size: clamp(2.5rem, calc((90vw - 39rem) / 10.8), 3.25rem); }
  .notes { display: contents; }
  .note { grid-row: 1; width: 14rem; align-self: start; }
  .notes > .note:nth-child(1) { grid-column: 1; margin-top: 1rem; justify-self: end; }
  .notes > .note:nth-child(2) { grid-column: 3; margin-top: 4rem; justify-self: start; }
  .notes > .note:nth-child(3) { grid-column: 1; margin-top: 15rem; justify-self: start; }
  .notes > .note:nth-child(4) { grid-column: 3; margin-top: 18rem; justify-self: end; }
}

/* The business benefits, company details and closing invitation. */
.section-title { font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.12; margin: 0 auto; max-width: 32ch; text-wrap: balance; }
h2 > .section-link { text-decoration: none; }
.section-link::after { content: "#"; margin-left: 0.25em; color: var(--rust); opacity: 0; transition: opacity 0.15s; }
.section-link:hover::after, .section-link:focus-visible::after { opacity: 1; }
.section-link:focus-visible { outline: none; text-decoration: underline var(--rust); }

/* A hairline separates each part of the story. */
.benefits, .approve, .call { width: 100%; max-width: 72rem; margin-inline: auto; padding-block: var(--section-space); border-top: 1px solid var(--hairline); }

/* Two short reasons to build with Covibes, beside each other when there is room. */
.benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem clamp(2rem, 5vw, 4rem); }
.benefit .section-title { margin-inline: 0; }
.benefit p { max-width: 48ch; margin: 1.25rem 0 0; line-height: 1.65; }

/* Project access and separate app data. */
.approve { text-align: center; }
.approve-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem clamp(2rem, 5vw, 4rem); max-width: 48rem; margin: 2.25rem auto 0; padding: 0; text-align: left; }
.approve-list h3 { margin: 0 0 0.45rem; font-size: 0.9rem; font-weight: 400; color: var(--rust); }
.approve-list p { margin: 0; line-height: 1.6; }

/* Proof: one line in the hand. */

/* The ask, as zeroshot.sh closes: a tilted title and the stamp. */
.call { display: grid; justify-items: center; gap: 1rem; padding-bottom: calc(var(--section-space) + 1rem); text-align: center; }
.call-title { margin: 0; font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; transform: rotate(-1.2deg); }
.call > p { max-width: 46ch; margin: 0; line-height: 1.6; color: var(--ink-2); text-wrap: balance; }
.call .call-actions { margin-top: 0.5rem; }
.stamp {
  position: relative; display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; background: var(--ink); color: var(--paper);
  font-family: var(--ui); font-size: 0.9rem; padding: 1rem 1.6rem;
}
.stamp:hover { background: var(--rust); }
.stamp:active { transform: translate(1px, 1px); filter: url(#oe-ink-bleed); }
.stamp::after { content: ""; position: absolute; inset: 0; transform: translate(3px, 3px); background: var(--ink); opacity: 0; pointer-events: none; z-index: -1; transition: opacity 420ms ease-out; }
.stamp:active::after { opacity: 0.05; transition: none; }
.stamp:focus-visible { outline: 3px solid var(--rust); outline-offset: 4px; }

/* Footer */
.foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.25rem 1.75rem; border-top: 1px solid var(--hairline); padding-block: 1.5rem 2.5rem; font-size: 0.8rem; color: var(--muted); }
.foot a { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 2.75rem; text-decoration: none; }
.foot a:hover { color: var(--rust); }

@media (max-width: 860px) {
  .benefits { grid-template-columns: minmax(0, 1fr); }
}
/* Phone: the tall drawing, notes and columns in one, real tap targets. */
@media (max-width: 560px) {
  .lockup-name { display: none; }
  .actions-links a { min-height: 2.75rem; }
  .project--wide { display: none; }
  .project--tall { display: block; width: 100%; }
  .notes { grid-template-columns: 1fr; }
  .note-paper { min-height: 0; }
  .approve-list { grid-template-columns: 1fr; row-gap: 1.25rem; }
}
@media (max-width: 380px) {
  .lockup-product { font-size: 1.8rem; }
  .masthead-call { padding-inline: 0.2rem; font-size: 0.82rem; }
}
@media (prefers-reduced-motion: reduce) {
  .note-paper, .note-paper::after, .stamp::after { transition: none; }
}