/* Landing page below the hero. The hero keeps its own styles in hero/scene.css. */
:root {
  --paper: #F4EEEA; --paper-2: #EDE3DE; --card: #FFFCFA; --line: #DCC3CF;
  --ink: #68204C; --ink-deep: #340323; --ink-soft: #7D3460; --night: #22021A;
  --gold: #E3A82E; --gold-soft: #F1D08A; --bordeaux: #70131F;
  --display: "Archivo", "Overpass", sans-serif;
  --sans: "Overpass", ui-sans-serif, system-ui, sans-serif;
  --mono: "Overpass Mono", ui-monospace, monospace;
  --wrap: 1160px; --gut: clamp(20px, 4vw, 40px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
html, body { background: var(--paper); }
body { font: 17px/1.5 var(--sans); color: var(--ink-deep); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.hero { height: 100vh; height: 100svh; min-height: 560px; --m: max(var(--gut), calc((100% - var(--wrap)) / 2)); } /* the title lines up with the header wordmark */
.grain-fixed { position: fixed; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.band { position: relative; padding: clamp(64px, 8vw, 104px) 0; }
.band.alt { background: var(--paper-2); }

/* header: fixed from the first frame. Over the top of the hero it is only the wordmark; once the page scrolls,
   its background, nav and contact button fade in under the same wordmark, so nothing slides or jumps. */
.top { position: fixed; z-index: 60; inset: 0 0 auto; border-bottom: 1px solid transparent;
  transition: background-color .3s, border-color .3s, -webkit-backdrop-filter .3s, backdrop-filter .3s; }
.top.on { background: rgba(244, 238, 234, .9); border-color: var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.top .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
/* the wordmark: the moon is the C of "Cha", as in assets/logos/chalabs-gold.png */
.top .brand { display: inline-flex; align-items: baseline; font: 500 23px/1 "Inter", var(--sans); letter-spacing: -.015em; color: var(--ink); text-decoration: none; }
.top .brand svg { height: 1.24em; width: auto; margin: 0 .1em -.22em 0; fill: currentColor; }
.top nav { display: flex; gap: 24px; margin-left: auto; }
.top nav a { font: 700 13px var(--mono); letter-spacing: .04em; text-decoration: none; color: var(--ink-soft); }
.top nav a:hover { color: var(--ink-deep); }
.top .cta { padding: 9px 14px; font: 700 13px var(--mono); text-decoration: none; color: var(--paper); background: var(--ink-deep); box-shadow: 3px 3px 0 var(--gold); }
.top nav, .top .cta { opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.top.on nav, .top.on .cta { opacity: 1; visibility: visible; }

/* section heads */
.head { margin-bottom: clamp(40px, 5vw, 64px); }
.head .kick { margin-bottom: 14px; }
.kick { font: 700 12px/1.9 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.kick b { color: var(--gold); margin-right: 8px; }
.head h2 { font: 900 clamp(34px, 4.6vw, 60px)/.98 var(--display); font-stretch: 112%; letter-spacing: -.035em; color: var(--ink); text-shadow: 4px 4px 0 var(--gold); max-width: 16em; }
.head p:not(.kick) { margin-top: 18px; max-width: 40em; font-size: 19px; font-weight: 600; color: var(--ink-deep); }

.btn { display: inline-flex; gap: 10px; align-items: center; padding: 13px 20px; font: 700 14px var(--mono); letter-spacing: .03em; color: var(--ink-deep);
  background: var(--card); text-decoration: none; border: 1.6px solid var(--ink-deep); box-shadow: 4px 4px 0 var(--gold); transition: transform .15s, box-shadow .15s; cursor: pointer; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--gold); }
.btn.dark { background: var(--ink-deep); color: var(--paper); }
.link { font: 700 14px var(--mono); color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--gold); }
.link:hover { color: var(--ink-deep); }

/* about */
.about > * { max-width: 900px; }
.about h2 { margin-top: 14px; font: 900 clamp(38px, 5vw, 64px)/.95 var(--display); font-stretch: 112%; letter-spacing: -.04em; color: var(--ink); text-shadow: 5px 5px 0 var(--gold); }
.about .lead { margin-top: 22px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; font-weight: 600; max-width: 38em; }
.roles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; list-style: none; }
.roles li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--card); border: 1.4px solid var(--ink-deep); font: 700 13px var(--mono); }
.roles li i { width: 9px; height: 9px; background: var(--c); }

/* work: Feedwrk wide on the left, the two others stacked on the right */
.projects { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 28px; }
.proj { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--card); border: 2px solid var(--ink-deep); box-shadow: 7px 7px 0 var(--c, var(--ink)); }
.fw-card { grid-row: span 2; }
.proj .ph { display: flex; align-items: center; gap: 14px; }
.proj .ph img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; border: 1.4px solid var(--ink-deep); background: var(--paper); }
.proj .ph img.wide { width: auto; height: 30px; border: 0; border-radius: 0; background: none; }
.proj .ph .tag { margin-left: auto; }
.proj h3 { font: 900 22px/1.05 var(--display); font-stretch: 110%; letter-spacing: -.025em; color: var(--ink); }
.tag { display: inline-block; font: 700 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.tag.live { color: #2F6F6A; }
.tag.live::before { content: "● "; }
.proj p { font-size: 15.5px; line-height: 1.5; }
.proj .shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.proj .shots img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: top; border: 1.4px solid var(--ink-deep); border-radius: 8px; }
.proj .go { margin-top: auto; align-self: flex-start; }

/* Feedwrk card: the "improving your product feed" figure. Products in, Feedwrk in the middle, feeds out.
   Three columns while the figure is wide, stacked with downward arrows when it is narrow (a container query on the figure). */
.fw-panel { flex: 1; display: flex; flex-direction: column; gap: 20px; min-height: 0; margin: 4px 0 0;
  padding: clamp(18px, 2.4vw, 28px); background: #EAF2F9; border: 1.4px solid #CBDDEC; border-radius: 10px; container-type: inline-size; }
.fw-panel .ff-cap { font: 700 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #0B5A9A; }
.fw-panel .ff-cap::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 10px 1px 0; background: var(--gold); }
.fw-panel .ff-flow { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1.2fr) 40px minmax(0, 1fr); gap: 8px; align-items: center; margin: auto 0; }
.fw-panel .ff-col { display: flex; flex-direction: column; gap: 10px; }
.fw-panel .ff-h { font: 700 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.fw-panel ul { list-style: none; }
.fw-panel .ff-list { display: grid; gap: 7px; }
.fw-panel .ff-list li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: #fff; border: 1.4px solid #CBDDEC; font: 700 14px/1.2 var(--sans); color: var(--ink-deep); }
.fw-panel .ff-list img, .fw-panel .ff-list svg { width: 22px; height: 22px; flex: none; }
.fw-panel svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fw-panel .ff-file.csv { color: #1E7B45; }
.fw-panel .ff-file.xml { color: #C25B12; }
.fw-panel .ff-core { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 14px 14px; background: #fff; border: 2px solid var(--ink-deep); box-shadow: 5px 5px 0 var(--gold); }
.fw-panel .ff-logo { height: 26px; width: auto; }
.fw-panel .ff-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
.fw-panel .ff-steps li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 9px; background: #EAF2F9; font: 700 13px/1.15 var(--sans); color: var(--ink-deep); text-align: center; }
.fw-panel .ff-steps svg { width: 22px; height: 22px; color: #0071c6; }
.fw-panel .ff-arrow { width: 100%; height: auto; overflow: visible; color: #0071c6; stroke-width: 2.4; }
.fw-panel .ff-line { stroke-dasharray: 4 5; animation: ff-flow 1.1s linear infinite; }
@keyframes ff-flow { to { stroke-dashoffset: -9; } }
@media (prefers-reduced-motion: reduce) { .fw-panel .ff-line { animation: none; } }
@container (max-width: 540px) {
  .fw-panel .ff-flow { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fw-panel .ff-cap { letter-spacing: .08em; }
  .fw-panel .ff-arrow { width: 40px; margin: 18px auto; transform: rotate(90deg); }
  .fw-panel .ff-list { display: flex; flex-wrap: wrap; gap: 6px; }
  .fw-panel .ff-list li { flex: 1 1 auto; padding: 6px 9px; font-size: 13.5px; }
}

/* tools: the AI Resources board */
.board { background: var(--card); border: 2px solid var(--ink-deep); box-shadow: 10px 10px 0 var(--gold); padding: 26px 22px 22px; }
.map { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); counter-reset: st; }
.map li { position: relative; padding: 16px 10px 14px; border-top: 6px solid var(--accent); display: flex; flex-direction: column; gap: 8px; counter-increment: st; }
.map li + li { border-left: 1px dashed var(--line); }
.st-n { font: 800 15px/1.15 var(--display); color: var(--ink-deep); min-height: 2.4em; }
.st-n::before { content: counter(st); display: block; font: 700 11px var(--mono); color: var(--accent); margin-bottom: 4px; }
.map .chip { position: relative; display: flex; align-items: center; gap: 8px; padding: 7px; background: var(--card); border: 1.4px solid var(--ink-deep);
  box-shadow: 3px 3px 0 var(--accent); font-weight: 700; font-size: 13px; line-height: 1.2; text-decoration: none; white-space: normal; /* the hero's .chip sets nowrap */ transition: transform .15s, box-shadow .15s; }
.map .chip:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--accent); }
.map .chip img { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; flex: none; }
.map .chip.start { background: var(--gold-soft); box-shadow: 3px 3px 0 var(--ink-deep); }
.map .chip em { position: absolute; top: -10px; right: -6px; padding: 2px 6px; font: 700 9.5px var(--mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-deep); background: var(--gold); }
/* tools: what I find most useful */
.mu { margin-top: 40px; }
.mu-h { font: 700 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.mu-cards { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.mu-card { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; background: var(--card); border: 2px solid var(--ink-deep); box-shadow: 6px 6px 0 var(--gold); text-decoration: none; font-weight: 600; font-size: 16px; line-height: 1.35; color: var(--ink-deep); transition: transform .15s, box-shadow .15s; }
.mu-card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--gold); }
.mu-card img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; flex: none; }
.mu-card b { display: block; font: 900 20px/1.15 var(--display); color: var(--ink); margin-bottom: 4px; }
.board-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; margin-top: 32px; }
.agent { padding: 22px 24px; background: var(--ink-deep); color: var(--gold-soft); box-shadow: 8px 8px 0 var(--gold); }
.agent b { display: block; font: 800 21px/1.2 var(--display); color: var(--paper); margin-bottom: 4px; }
.agent .cmd { position: relative; margin-top: 14px; padding: 14px 92px 14px 16px; background: var(--night); border: 1px solid #5a2142; }
.agent { min-width: 0; }
.agent code { font: 700 14px/1.6 var(--mono); color: var(--paper); white-space: pre-wrap; overflow-wrap: anywhere; }
.copy { position: absolute; top: 10px; right: 10px; padding: 6px 12px; font: 700 12px var(--mono); color: var(--ink-deep); background: var(--gold); border: 0; cursor: pointer; }

/* content */
.posts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.post[hidden] { display: none; }
.post { display: flex; flex-direction: column; background: var(--card); border: 1.6px solid var(--ink-deep); box-shadow: 6px 6px 0 var(--c, var(--gold)); color: inherit; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.post:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--c, var(--gold)); }
.post .pic { aspect-ratio: 4 / 5; overflow: hidden; border-bottom: 1.6px solid var(--ink-deep); background: var(--paper-2); }
.post .pic img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.post:hover .pic img { transform: scale(1.03); }
.post .body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1; }
.post .row { display: flex; align-items: center; gap: 10px; font: 700 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.post .row svg { width: 16px; height: 16px; flex: none; }
.post .row .kind { color: var(--c, var(--ink)); }
.post h3 { font: 800 16px/1.3 var(--display); color: var(--ink-deep); }
.post .go { margin-top: auto; font: 700 13px var(--mono); color: var(--ink); }
.post.talk { --c: var(--bordeaux); }
.tcover { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px; text-decoration: none; background: var(--paper); }
.tc-k { font: 700 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.tc-t { position: relative; z-index: 1; font: 900 clamp(26px, 2.4vw, 34px)/.95 var(--display); font-stretch: 112%; letter-spacing: -.035em; color: var(--ink); text-shadow: 4px 4px 0 var(--gold); }
.tc-bars { position: absolute; inset: auto 0 0; height: 55%; display: flex; align-items: flex-end; gap: 4px; padding: 0 0 0 4px; }
.tc-bars i { flex: 1; background: linear-gradient(#E3A82E, #D9603B 30%, #9E1B32 60%, #500818); }
.tc-bars i:nth-child(1) { height: 10%; } .tc-bars i:nth-child(2) { height: 14%; } .tc-bars i:nth-child(3) { height: 19%; }
.tc-bars i:nth-child(4) { height: 25%; } .tc-bars i:nth-child(5) { height: 33%; } .tc-bars i:nth-child(6) { height: 44%; }
.tc-bars i:nth-child(7) { height: 58%; } .tc-bars i:nth-child(8) { height: 76%; } .tc-bars i:nth-child(9) { height: 100%; }
.post .links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: auto; }
.post p { font-size: 15px; line-height: 1.45; }
.more { margin-top: 40px; display: flex; justify-content: center; }

/* contact */
.contact { background: var(--ink-deep); color: var(--paper); }
.contact .head h2 { color: var(--paper); text-shadow: 4px 4px 0 var(--bordeaux); }
.contact .kick { color: var(--gold-soft); }
.contact .head p { color: #E9D7DF; }
.form { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 56px); }
.needs { display: grid; gap: 14px; align-content: start; }
.need { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: center; padding: 18px 20px; background: #43062F; border: 1.6px solid #6A2550; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.need:hover { border-color: var(--gold-soft); }
.need input { position: absolute; opacity: 0; pointer-events: none; }
.need .ic { width: 44px; height: 44px; display: grid; place-items: center; background: var(--ink-deep); border: 1.4px solid #6A2550; color: var(--gold); }
.need .ic svg { width: 22px; height: 22px; }
.need b { display: block; font: 800 18px/1.25 var(--display); color: var(--paper); }
.need span { display: block; margin-top: 4px; font-size: 14.5px; color: #D9C2CD; }
.need:has(input:checked) { background: #5A0F3C; border-color: var(--gold); box-shadow: 5px 5px 0 var(--gold); transform: translate(-2px, -2px); }
.need:has(input:checked) .ic { background: var(--gold); color: var(--ink-deep); border-color: var(--gold); }
.need:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
.fields { display: grid; gap: 14px; align-content: start; padding: 26px; background: var(--paper); color: var(--ink-deep); box-shadow: 10px 10px 0 var(--gold); }
.fields label { display: grid; gap: 6px; font: 700 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.fields input, .fields textarea { width: 100%; padding: 12px 14px; font: 600 16px var(--sans); color: var(--ink-deep); background: var(--card); border: 1.6px solid var(--ink-deep); border-radius: 0; }
.fields textarea { min-height: 120px; resize: vertical; }
.fields input:focus, .fields textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.fields .btn { justify-content: center; margin-top: 4px; }
.fields .note { font-size: 13.5px; color: var(--ink-soft); }
.fields .note a { font-weight: 700; }

/* contact form: send result (set by the submit script) and the bot trap field people never see */
.fields .btn:disabled { cursor: progress; opacity: .7; transform: none; box-shadow: none; }
.fields .status { padding: 12px 14px; font: 700 14px/1.4 var(--sans); border: 1.6px solid var(--ink-deep); }
.fields .status.ok { background: var(--gold-soft); color: var(--ink-deep); box-shadow: 4px 4px 0 var(--gold); }
.fields .status.err { background: #F6DEDF; color: var(--bordeaux); box-shadow: 4px 4px 0 var(--bordeaux); }
.fields .status a { font-weight: 800; color: inherit; }
.fields .status.err:not([hidden]) + .note { display: none; }
.fields .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.foot { background: var(--night); color: #CDB5C2; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; padding-top: 28px; padding-bottom: 28px; font: 600 13px var(--mono); }
.foot a { color: var(--gold-soft); text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot .sp { margin-left: auto; }


/* Buddaban's logo is drawn for a dark ground */
.bb-logo { padding: 20px 22px; background: #1D2419; border: 1.4px solid var(--ink-deep); }
.bb-logo img { height: 44px; width: auto; }

/* reveal on scroll; the script adds .rv to targets and .in once they show */
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

@media (max-width: 1080px) {
  .map { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 18px; }
  .map li:nth-child(5) { border-left: 0; }
  .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .projects { grid-template-columns: 1fr 1fr; }
  .fw-card { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 860px) {
  .form, .board-foot, .projects { grid-template-columns: 1fr; }
  .top nav { display: none; }
  .top .cta { margin-left: auto; }
}
@media (max-width: 640px) {
  .map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map li:nth-child(odd) { border-left: 0; }
  .map li:nth-child(5) { border-left: 0; }
  .posts { grid-template-columns: 1fr; }
  .board { padding: 18px 14px; }
  .agent .cmd { padding: 44px 14px 14px; }
}

/* about: one block. Text on the left, the voxel monk large on the right, Cha's photo pinned like a polaroid
   in the empty corner under the monk's platform, overlapping toward the text. Phone stacks text, then the scene. */
.wrap.about { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(20px, 3vw, 40px); align-items: center; }
.about > * { max-width: none; }
.about .about-text { max-width: 500px; position: relative; z-index: 2; }
.about h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: .97; text-shadow: 4px 4px 0 var(--gold); }
.about .lead { margin-top: 18px; font-size: 17.5px; line-height: 1.5; }
.about .roles { margin-top: 20px; gap: 8px; }
.about-scene { position: relative; margin: -7% -2% -6% 0; }
.about .monk-fig { width: 100%; margin: 0; pointer-events: none; }
.monk-fig .cast-monk { width: 100%; aspect-ratio: 760 / 600; }
.about .portrait { position: absolute; z-index: 1; left: -1%; bottom: 7%; width: 22%; margin: 0; padding: 7px 7px 0; background: var(--card);
  border: 1.6px solid var(--ink-deep); box-shadow: 6px 6px 0 var(--gold); }
.about .portrait.in { transform: rotate(-4deg); }
.about .portrait img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 32%; }
.about .portrait figcaption { padding: 6px 0 7px; font: 700 clamp(9.5px, .8vw, 11px)/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-align: center; color: var(--ink-soft); white-space: nowrap; }
@media (max-width: 860px) {
  .wrap.about { grid-template-columns: 1fr; gap: 8px; }
  .about .about-text { max-width: 560px; }
  .about-scene { width: 100%; max-width: 600px; margin: -4% auto -4%; }
  .about .portrait { width: 25%; left: 0; bottom: 2%; padding: 5px 5px 0; }
}

/* hero: the contact call to action in the bottom right of the waves; the link scrolls to #contact */
.hero-cta { position: absolute; z-index: 6; right: var(--m); bottom: clamp(28px, 6vh, 64px); width: 330px; padding: 20px 22px 22px;
  background: var(--paper); border: 2px solid var(--ink-deep); box-shadow: 8px 8px 0 var(--gold); }
.hero-cta .hc-t { font: 900 25px/1.02 var(--display); font-stretch: 110%; letter-spacing: -.03em; color: var(--ink); }
.hero-cta .hc-s { margin-top: 8px; font: 600 16px/1.4 var(--sans); color: var(--ink-deep); }
.hero-cta .btn { margin-top: 16px; }
@media (max-width: 700px) {
  .hero-cta { left: var(--m); right: var(--m); bottom: 16px; width: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 12px 12px 12px 14px; box-shadow: 5px 5px 0 var(--gold); }
  .hero-cta .hc-t { grid-column: 1 / -1; font-size: 18px; }
  .hero-cta .hc-s { margin: 0; font-size: 13.5px; line-height: 1.3; }
  .hero-cta .btn { margin: 0; padding: 10px 12px; font-size: 12.5px; box-shadow: 3px 3px 0 var(--gold); }
}

/* keyboard focus on buttons, visible on dark and light */
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* one column (phones and narrow windows): What's That? is the last project, and the tools section ends at the board
   and the AI Resources button (no most-useful cards, no agent prompt) */
@media (max-width: 860px) {
  .wt-card { order: 1; }
  #tools .mu, .board-foot .agent { display: none; }
  .board-foot { justify-items: start; }
}

/* phones: a shorter page. Feedwrk gets a compact diagram, the tools board shows one tool
   per step, and Content keeps only the talk. */
@media (max-width: 680px) {
  .band { padding: 56px 0; }
  .head { margin-bottom: 32px; }
  .head p:not(.kick) { font-size: 17px; }
  .projects { gap: 22px; }
  .proj { padding: 18px; box-shadow: 5px 5px 0 var(--c, var(--ink)); }
  .proj .shots { gap: 6px; }
}
@container (max-width: 540px) {
  .fw-panel { gap: 12px; }
  .fw-panel .ff-h { font-size: 10px; }
  .fw-panel .ff-col { gap: 7px; }
  .fw-panel .ff-arrow { width: 26px; margin: 10px auto; }
  .fw-panel .ff-list li { flex: 0 1 auto; gap: 6px; padding: 5px 8px; font-size: 12.5px; }
  .fw-panel .ff-list img, .fw-panel .ff-list svg { width: 16px; height: 16px; }
  /* feeds out: the channel logos alone, one row */
  .fw-panel .ff-col:last-child .ff-list { flex-wrap: nowrap; }
  .fw-panel .ff-col:last-child .ff-list li { flex: 1 1 0; justify-content: center; padding: 7px 0; font-size: 0; }
  .fw-panel .ff-col:last-child .ff-list img { width: 20px; height: 20px; }
  .fw-panel .ff-core { gap: 10px; padding: 12px 10px 10px; box-shadow: 4px 4px 0 var(--gold); }
  .fw-panel .ff-logo { height: 20px; }
  .fw-panel .ff-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .fw-panel .ff-steps li { gap: 4px; padding: 7px 2px 6px; font-size: 11px; }
  .fw-panel .ff-steps svg { width: 17px; height: 17px; }
}
@media (max-width: 640px) {
  .map .chip ~ .chip:not(.start), .map li:has(> .chip.start) > .chip:not(.start) { display: none; }
  .map li { padding: 12px 8px 10px; gap: 6px; }
  .st-n { min-height: 0; }
  .board-foot { margin-top: 24px; gap: 20px; }
  .posts > .post:not(.talk) { display: none; }
  .post.talk .pic { aspect-ratio: 16 / 10; }
  .more { margin-top: 28px; }
}