/* Hero */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: min(100svh, 75rem);
  padding-top: calc(var(--header-height) + clamp(2.75rem, 6vh, 5rem));
  padding-bottom: clamp(3rem, 5vh, 4rem);
  align-content: center;
  overflow: hidden;
}

.hero > *:not(.hero-orbit):not(.scroll-cue) { width: min(100%, 94rem); min-width: 0; margin-inline: auto; }
.hero-intro { display: flex; align-items: flex-start; justify-content: space-between; }
.hero-note { margin: 0; font-family: cursive; font-size: 1rem; font-weight: 700; line-height: 1.4; text-align: right; transform: rotate(4deg); }
.hero-title-wrap { position: relative; margin-block: clamp(2.75rem, 6vh, 5.25rem) !important; text-align: center; }
.hero-title-wrap .tape { top: -1.2rem; left: 50%; transform: translateX(-50%) rotate(3deg); }
.micro-label { display: inline-flex; width: max-content; align-items: center; gap: .55rem; margin: 0 auto 1rem; padding: .52rem .78rem; border: var(--border); background: var(--ink); color: var(--paper); font-size: var(--label-size); font-weight: 900; letter-spacing: .09em; text-transform: uppercase; box-shadow: 3px 3px 0 var(--coral); transform: rotate(-1deg); }
.micro-label span { color: var(--mint); font: 900 .82rem/1 monospace; letter-spacing: 0; }

.hero h1 { margin: 0; font-family: var(--display); font-size: clamp(5rem, min(14.2vw, 21vh), 13.8rem); line-height: .73; letter-spacing: -.085em; }
.hero h1 span { display: block; }
.hero .title-accent { width: max-content; margin: .12em auto 0; padding: .02em .09em .07em; border: 2px solid var(--ink); background: var(--coral); color: var(--paper); font-size: .66em; text-shadow: 3px 3px 0 var(--ink); transform: rotate(-1deg); }
.role-tag { position: absolute; z-index: 2; padding: .52rem .74rem; border: var(--border); background: var(--yellow); color: var(--black); font-size: var(--micro-size); font-weight: 900; box-shadow: 3px 3px 0 var(--ink); }
.role-tag--left { left: 11%; bottom: 6%; transform: rotate(-5deg); }
.role-tag--right { right: 9%; bottom: 25%; background: var(--mint); transform: rotate(4deg); }

.hero-bottom { display: grid; grid-template-columns: minmax(16rem, 37rem) auto minmax(9rem, 1fr); gap: clamp(1.5rem, 4vw, 4.5rem); align-items: end; }
.hero-statement { margin: 0; font-size: clamp(1.1rem, 1.75vw, 1.5rem); font-weight: 600; line-height: 1.55; }
.hero-statement mark { background: linear-gradient(transparent 58%, var(--yellow) 58%); color: inherit; }
.hero-actions { display: flex; gap: .75rem; }
.hero-mini-card { display: flex; align-items: center; justify-self: end; gap: .9rem; padding-left: 1.1rem; border-left: 2px solid var(--ink); }
.hero-mini-card strong { font: 2.65rem var(--display); letter-spacing: -.06em; }
.hero-mini-card span { color: var(--muted); font-size: .76rem; font-weight: 800; line-height: 1.35; text-transform: uppercase; }
.hero-orbit { position: absolute; z-index: -1; font-size: clamp(4rem, 9vw, 8rem); }
.hero-orbit--one { top: 22%; left: -1.5rem; color: var(--yellow); transform: rotate(12deg); }
.hero-orbit--two { right: 1.5rem; bottom: 17%; color: var(--blue); transform: rotate(-12deg); }
.scroll-cue { position: absolute; right: var(--page-x); bottom: 1.5rem; display: flex; align-items: center; gap: .65rem; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.scroll-cue i { display: block; width: 2rem; height: 1px; background: currentColor; }

/* Personal status */
.now-strip { display: grid; grid-template-columns: repeat(3, 1fr); padding-inline: var(--page-x); border-block: var(--border); background: #171714; color: #f4efe5; }
.now-strip > div { display: grid; min-width: 0; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; padding: 1.25rem clamp(1rem, 2.5vw, 2.5rem); }
.now-strip > div + div { border-left: 1px solid rgba(244, 239, 229, .35); }
.now-strip > div:first-child { padding-left: 0; }
.now-strip > div:last-child { padding-right: 0; }
.now-strip span { padding: .28rem .42rem; background: var(--yellow); color: #171714; font-size: var(--micro-size); font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.now-strip p { margin: 0; color: #f4efe5; font-size: .86rem; font-weight: 700; line-height: 1.45; }

/* About */
.about { padding-bottom: clamp(4.5rem, 7vw, 7rem); border-top: var(--border); }
.about > * { width: min(100%, 94rem); margin-inline: auto; }
.about-layout { display: grid; grid-template-columns: minmax(14rem, .72fr) minmax(22rem, 1.5fr) minmax(10rem, .55fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.portrait-wrap { position: relative; padding: .8rem; border: var(--border); background: #fffdf8; box-shadow: 6px 7px 0 rgba(23, 23, 20, .18); transform: rotate(-3deg); }
.portrait-wrap .tape { top: -.9rem; left: 50%; transform: translateX(-50%) rotate(2deg); }
.portrait-wrap > p { margin: .7rem 0 0; color: #171714; font-size: .72rem; font-weight: 900; text-align: center; text-transform: uppercase; }
.portrait-caption { position: static; display: block; max-width: 100%; margin: .35rem auto 0; color: #171714; font-family: cursive; font-size: .78rem; font-weight: 700; line-height: 1.2; text-align: center; text-wrap: balance; transform: rotate(-1deg); }
.about-copy .lead { margin-bottom: 2.2rem; font-size: clamp(1.7rem, 3.15vw, 3.15rem); font-weight: 700; line-height: 1.25; letter-spacing: -.035em; }
.about-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2.2rem; }
.about-columns p { margin: 0; color: var(--muted); line-height: 1.7; }
.personal-note { margin: 0 0 2.2rem; padding: 1rem 1.15rem; border-left: 4px solid var(--coral); background: color-mix(in srgb, var(--yellow) 22%, transparent); font-size: 1rem; font-weight: 800; line-height: 1.55; }
.profile-facts { display: flex; flex-direction: column; border: var(--border); background: var(--white); }
.profile-facts div { display: flex; align-items: center; gap: .75rem; padding: 1.4rem 1rem; border-bottom: var(--border); }
.profile-facts div:last-child { border-bottom: 0; }
.profile-facts strong { min-width: 3.5rem; font: 2.2rem var(--display); letter-spacing: -.06em; }
.profile-facts span { color: var(--muted); font-size: .74rem; font-weight: 800; line-height: 1.3; text-transform: uppercase; }
.toolbox { display: grid; grid-template-columns: 13rem 1fr; gap: 2rem; align-items: start; margin-top: clamp(3.5rem, 6vw, 5rem); padding-top: 1.5rem; border-top: var(--border); }
.toolbox > p { font-size: var(--label-size); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.toolbox ul { display: flex; flex-wrap: wrap; gap: .55rem; }
.toolbox li { padding: .58rem .82rem; border: var(--border); background: var(--paper); font-size: .78rem; font-weight: 800; }
.toolbox li:nth-child(4n + 1) { background: var(--mint); color: var(--black); transform: rotate(-1deg); }
.toolbox li:nth-child(4n + 2) { background: var(--pink); color: var(--black); transform: rotate(1deg); }
.toolbox li:nth-child(4n + 3) { background: var(--yellow); color: var(--black); transform: rotate(-.5deg); }
.toolbox li:nth-child(4n) { background: var(--blue-deep); color: white; transform: rotate(1deg); }

/* Projects */
.projects { border-top: var(--border); background: color-mix(in srgb, var(--paper-deep) 45%, transparent); }
.projects > * { width: min(100%, 94rem); margin-inline: auto; }
.section-header--projects h2 span { color: var(--coral); }
.project-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.filters button { padding: .62rem .82rem; border: var(--border); background: var(--paper); font-size: var(--micro-size); font-weight: 900; cursor: pointer; }
.filters button span { margin-left: .45rem; color: var(--muted); font-size: .64rem; }
.filters button:hover, .filters button.is-active { background: var(--ink); color: var(--paper); }
.filters button.is-active span { color: var(--paper); }
.filter-status { margin: 0; color: var(--ink); font-size: var(--micro-size); font-weight: 800; }
.project-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.project-card { position: relative; grid-column: span 6; border: var(--border); background: var(--paper); transition: opacity .25s ease; }
.project-card:nth-child(4n + 1), .project-card:nth-child(4n) { grid-column: span 7; }
.project-card:nth-child(4n + 2), .project-card:nth-child(4n + 3) { grid-column: span 5; }
.project-card.is-hidden { display: none; }
.project-card:hover .project-art { transform: translateY(-.35rem); box-shadow: 0 .35rem 0 var(--ink); }
.project-art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: var(--border); transform: translateZ(0); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.project-card:nth-child(4n + 2) .project-art, .project-card:nth-child(4n + 3) .project-art { aspect-ratio: 4 / 3; }
.project-seq { position: absolute; top: 1rem; left: 1rem; z-index: 4; display: grid; width: 2.65rem; aspect-ratio: 1; place-items: center; border: 1.5px solid var(--black); border-radius: 50%; background: var(--paper); color: var(--ink); font-size: .78rem; font-weight: 900; }
.project-sticker { position: absolute; z-index: 4; right: .9rem; top: 1rem; max-width: calc(100% - 5rem); padding: .52rem .72rem; border: 1.5px solid var(--black); background: var(--yellow); color: var(--black); font-size: var(--micro-size); font-weight: 900; line-height: 1.25; text-align: right; box-shadow: 3px 3px 0 var(--black); transform: rotate(2deg); }
.project-meta { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; padding: 1.5rem; }
.project-meta > div { min-width: 0; }
.project-meta > div > span { color: var(--ink); font-size: var(--micro-size); font-weight: 900; letter-spacing: .065em; text-transform: uppercase; }
.project-meta h3 { margin: .55rem 0 .65rem; font: clamp(1.85rem, 3.5vw, 3.75rem)/.95 var(--display); letter-spacing: -.05em; }
.project-meta p { max-width: 38rem; margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.6; }
.project-open { align-self: center; display: grid; width: 4.1rem; aspect-ratio: 1; place-items: center; border: var(--border); border-radius: 50%; background: var(--ink); color: var(--paper); cursor: pointer; transition: transform .25s var(--ease), background-color .2s ease; }
.project-open span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.project-open b { font-size: 1.35rem; }
.project-open:hover { background: var(--coral); color: var(--black); transform: rotate(45deg); }
.project-results { display: flex; border-top: var(--border); }
.project-results li { flex: 1; padding: .85rem 1.5rem; color: var(--muted); font-size: var(--micro-size); font-weight: 800; text-transform: uppercase; }
.project-results li + li { border-left: var(--border); }
.project-results strong { color: var(--ink); font-size: .88rem; }

/* Process */
.process { border-top: var(--border); }
.process > * { width: min(100%, 94rem); margin-inline: auto; }
.process-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: var(--border); }
.process-card { container-type: inline-size; position: relative; display: flex; min-width: 0; min-height: 0; flex-direction: column; padding: 1.35rem; border-right: var(--border); background: var(--paper); overflow: hidden; }
.process-card:last-child { border-right: 0; }
.process-card::after { content: ""; position: absolute; inset: auto -20% -45% 20%; aspect-ratio: 1; border-radius: 50%; background: var(--yellow); opacity: 0; transform: scale(.5); transition: .35s var(--ease); }
.process-card:hover::after { opacity: .35; transform: scale(1); }
.process-number { font-size: var(--label-size); font-weight: 900; }
.process-icon { position: relative; z-index: 1; display: grid; width: 5rem; aspect-ratio: 1; margin: 2.75rem 0 2.25rem; place-items: center; border: var(--border); border-radius: 50%; background: var(--mint); color: var(--black); font-size: 2rem; box-shadow: 4px 4px 0 var(--ink); transform: rotate(-5deg); }
.process-card:nth-child(2) .process-icon { background: var(--yellow); transform: rotate(5deg); }
.process-card:nth-child(3) .process-icon { background: var(--coral); }
.process-card:nth-child(4) .process-icon { background: var(--blue-deep); color: white; transform: rotate(5deg); }
.process-card h3 { position: relative; z-index: 1; margin-bottom: .7rem; font-family: var(--display); font-size: clamp(1.65rem, 2.15vw, 2.35rem); line-height: .98; letter-spacing: -.04em; overflow-wrap: anywhere; }
@supports (font-size: 1cqi) { .process-card h3 { font-size: clamp(1.65rem, 10.5cqi, 2.35rem); } }
.process-card p { position: relative; z-index: 1; min-height: 0; margin: 0 0 1.5rem; color: var(--muted); font-size: .96rem; line-height: 1.65; }
.process-card ul { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; }
.process-card li { padding: .42rem .58rem; border: 1px solid var(--line); font-size: .72rem; font-weight: 900; text-transform: uppercase; }

/* Learning loop */
.learning-loop { display: grid; grid-template-columns: minmax(14rem, .7fr) minmax(0, 2fr); margin-top: 2rem; border: var(--border); background: var(--white); }
.learning-loop > div { padding: 1.5rem; border-right: var(--border); }
.learning-loop > div span { display: block; margin-bottom: .65rem; font-size: var(--label-size); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.learning-loop > div p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.learning-loop ol { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; }
.learning-loop li { display: flex; min-width: 0; flex-direction: column; gap: .35rem; padding: 1.5rem 1rem; }
.learning-loop li + li { border-left: var(--border); }
.learning-loop b { color: var(--coral); font-size: var(--micro-size); }
.learning-loop strong { font: clamp(1.15rem, 1.8vw, 1.65rem)/1 var(--display); letter-spacing: -.03em; }
.learning-loop li span { color: var(--muted); font-size: .76rem; line-height: 1.4; }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(21rem, .8fr); gap: clamp(3rem, 8vw, 8rem); border-top: var(--border); overflow: hidden; }
.contact-copy, .contact-form { position: relative; z-index: 1; min-width: 0; }
.contact-copy h2 { max-width: 100%; margin: 2rem 0; font: clamp(2.25rem, 6vw, 7.15rem)/.86 var(--display); letter-spacing: -.07em; }
.contact-title-line { display: inline-block; max-width: 100%; white-space: nowrap; }
.contact-copy h2 .contact-title-accent { color: var(--coral); }
.contact-copy > p { max-width: 43rem; color: var(--muted); font-size: 1.08rem; line-height: 1.7; }
.contact-direct { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.2rem; margin-top: 3rem; }
.contact-direct > span { width: 100%; color: var(--muted); font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.contact-form { align-self: center; justify-self: end; display: grid; width: 100%; max-width: 43rem; grid-template-columns: 1fr 1fr; gap: 1.5rem; padding: clamp(1.5rem, 4vw, 3rem); border: var(--border); background: var(--white); box-shadow: var(--hard-shadow); }
.form-row { display: flex; min-width: 0; flex-direction: column; gap: .5rem; }
.form-row--full { grid-column: 1 / -1; }
.form-row label { font-size: .74rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.form-row input, .form-row textarea, .form-row select { width: 100%; min-width: 0; padding: .8rem 0; border: 0; border-bottom: 1.5px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); outline: 0; resize: vertical; }
.form-row input::placeholder, .form-row textarea::placeholder { color: var(--muted); opacity: 1; }
.form-row input:focus, .form-row textarea:focus, .form-row select:focus { border-color: var(--blue); box-shadow: 0 3px 0 var(--blue); }
.form-row [aria-invalid="true"] { border-color: var(--error); }
.field-error { min-height: 1rem; color: var(--error); font-size: .72rem; font-weight: 800; }
.form-footer { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; margin-top: .5rem; }
.form-footer .button { flex: 0 0 auto; gap: 1rem; white-space: nowrap; }
.form-status { max-width: 36rem; margin: 0; color: var(--muted); font-size: .74rem; line-height: 1.5; }
.manual-copy { grid-column: 1 / -1; width: 100%; min-height: 8rem; padding: .85rem; border: var(--border); background: var(--paper); color: var(--ink); font-size: .82rem; line-height: 1.5; resize: vertical; }
.contact-smile { position: absolute; right: calc(50% + 3rem); bottom: 1.2rem; color: var(--yellow); font-size: clamp(7rem, 8vw, 9rem); line-height: 1; opacity: .48; transform: rotate(12deg); -webkit-text-stroke: 2px var(--ink); }

/* Footer */
.site-footer { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 2rem; align-items: center; padding: 2rem var(--page-x); border-top: 1.5px solid #f4efe5; background: #171714; color: #f4efe5; }
.site-footer .brand-mark { border-color: #f4efe5; }
.site-footer .brand-name small { color: #b8b3aa; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.3rem; }
.footer-links a, .back-top { font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.site-footer > p { margin: 0; color: #d8d2c8; font-size: .7rem; line-height: 1.55; text-align: right; }
.back-top { text-decoration: none; }

/* Expertise */
.expertise .process-icon { font-family: var(--body); font-weight: 900; }
.expertise-grid .process-card p { min-height: 0; }

/* Resources */
.resources { border-top: var(--border); }
.resources > * { width: min(100%, 94rem); margin-inline: auto; }
.resources .section-header h2 span { color: var(--mint); -webkit-text-stroke: 1px var(--ink); }
.resource-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: .8rem; }
.resource-search { display: flex; min-width: min(100%, 20rem); flex-direction: column; gap: .35rem; }
.resource-search span { font-size: var(--label-size); font-weight: 900; letter-spacing: .085em; text-transform: uppercase; }
.resource-search input { width: 100%; padding: .65rem 0; border: 0; border-bottom: 1.5px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); outline: 0; }
.resource-search input:focus { border-color: var(--blue); box-shadow: 0 3px 0 var(--blue); }
.resource-status { margin: 0 0 1.5rem; color: var(--ink); font-size: var(--micro-size); font-weight: 800; text-align: right; }
.resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--border); border-left: var(--border); }
.resource-card { position: relative; display: flex; min-height: 25rem; flex-direction: column; padding: 1.4rem; border-right: var(--border); border-bottom: var(--border); background: var(--paper); }
.resource-card:hover { background: var(--white); }
.resource-icon { display: grid; width: 4.3rem; aspect-ratio: 1; margin-bottom: 3.3rem; place-items: center; border: var(--border); border-radius: 50%; background: var(--blue); color: white; font: 1rem var(--display); box-shadow: 4px 4px 0 var(--ink); transform: rotate(-5deg); }
.resource-card:nth-child(3n + 2) .resource-icon { background: var(--coral); color: var(--black); transform: rotate(5deg); }
.resource-card:nth-child(3n) .resource-icon { background: var(--mint); color: var(--black); }
.resource-state { position: absolute; top: 1.2rem; right: 1.2rem; padding: .42rem .58rem; border: 1px solid var(--line); color: var(--ink); font-size: .65rem; font-weight: 900; text-transform: uppercase; }
.resource-state--ready { border-color: #237949; background: #d9f2e4; color: #155f36; }
.resource-card > p:not(.resource-description) { margin-bottom: .6rem; color: var(--ink); font-size: var(--micro-size); font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.resource-card h3 { margin-bottom: .75rem; font: clamp(1.55rem, 2.5vw, 2.6rem)/1 var(--display); letter-spacing: -.045em; }
.resource-description { margin-bottom: 1.5rem; color: var(--muted); font-size: .92rem; line-height: 1.62; }
.resource-card > a { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: .8rem; border-top: var(--border); font-size: .76rem; font-weight: 900; text-decoration: none; text-transform: uppercase; }
.resource-card > a:hover { color: var(--coral); }
.resource-pending { margin-top: auto; padding-top: .85rem; border-top: 1px solid var(--line); color: var(--ink); font-size: var(--micro-size); font-weight: 900; text-transform: uppercase; }
.resource-empty { padding: 4rem 1rem; border: var(--border); text-align: center; }
.resource-empty strong { font: 2rem var(--display); }.resource-empty p { margin: .5rem 0 0; color: var(--muted); }

/* Community roadmap */
.community { border-top: var(--border); background: var(--community-bg); color: var(--community-text); }
.community > * { width: min(100%, 94rem); margin-inline: auto; }
.community .section-index { border-color: #171714; }
.community .section-header h2 span { color: var(--yellow); }
.community .section-summary { border-color: var(--yellow); color: var(--community-muted); }
.community-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(19rem, .75fr); gap: clamp(2rem, 6vw, 6rem); align-items: stretch; }
.community-roadmap { border-top: 1px solid rgba(255,255,255,.65); }
.community-roadmap article { display: grid; grid-template-columns: 5rem 1.5rem 1fr 3rem; gap: 1.2rem; align-items: center; padding: 1.6rem .5rem; border-bottom: 1px solid rgba(255,255,255,.65); }
.community-roadmap article > span { font-size: var(--micro-size); font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.community-roadmap article > i { width: .7rem; aspect-ratio: 1; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 .3rem rgba(130,211,182,.2); }
.community-roadmap article:nth-child(2) > i { background: var(--yellow); }.community-roadmap article:nth-child(3) > i { background: var(--coral); }
.community-roadmap h3 { margin-bottom: .35rem; font: clamp(1.4rem, 2.5vw, 2.4rem) var(--display); }
.community-roadmap p { margin: 0; color: var(--community-muted); font-size: .9rem; line-height: 1.6; }
.community-roadmap b { color: rgba(255,255,255,.25); font: 2rem var(--display); }
.community-card { position: relative; padding: clamp(2rem, 4vw, 3.5rem); border: 1.5px solid #171714; background: var(--paper); color: var(--ink); box-shadow: 8px 9px 0 #171714; transform: rotate(1deg); }
.community-signal { display: flex; height: 4rem; align-items: end; gap: .45rem; margin-bottom: 3rem; }
.community-signal i { display: block; width: .7rem; height: 30%; border-radius: 1rem; background: var(--coral); }.community-signal i:nth-child(2){height:65%;background:var(--yellow)}.community-signal i:nth-child(3){height:100%;background:var(--mint)}
.community-kicker { color: var(--ink); font-size: var(--label-size); font-weight: 900; letter-spacing: .085em; text-transform: uppercase; }
.community-card h3 { margin-bottom: 1.2rem; font: clamp(2rem, 3.6vw, 4rem)/.98 var(--display); letter-spacing: -.045em; }
.community-card > p:not(.community-kicker) { color: var(--muted); line-height: 1.7; }
.community-card .button { margin-top: 1.5rem; }
.social-hub { display: grid; grid-template-columns: 16rem 1fr; gap: 2rem; margin-top: clamp(4rem, 7vw, 7rem); padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.65); }
.social-hub > div:first-child p { margin-bottom: .4rem; font-size: var(--label-size); font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.social-hub > div:first-child span { color: var(--community-muted); font-size: .76rem; }
.social-note { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border: 1px solid rgba(255,255,255,.7); }
.social-note > b { display: grid; flex: 0 0 auto; width: 3rem; aspect-ratio: 1; place-items: center; border-radius: 50%; background: var(--yellow); color: #171714; font: 1.2rem var(--display); }
.social-note p { margin: 0; }
.social-note strong, .social-note span { display: block; }
.social-note strong { font-size: .9rem; }
.social-note span { margin-top: .25rem; color: var(--community-muted); font-size: .76rem; line-height: 1.45; }
.contact-direct > strong { font-size: .9rem; line-height: 1.5; }
.contact-network { font-family: var(--body); }