/* The site's plain pages (store, about, contact, write for us) in the 2026 look
   the home, learn and tools pages share: the hero card from global.css, then
   white round cards with a soft shadow, a pastel blob in one corner, a kicker
   pill, chips, a sticker where one is due, a coloured button and a ghost one.
   Weights stop at 700, the heaviest the site font ships. Card hues are named
   (indigo, emerald, amber, rose, sky) or, on the store, derived from the
   product's own highlight colour with color-mix. */

.ic-wrap { width: min(1160px, calc(100% - 32px)); margin: 0 auto; }
.ic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; align-items: stretch; }
.ic-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ic-grid > .wide { grid-column: 1 / -1; }

/* the card */
.ic-card { --hue: var(--ic-accent); --hue-soft: var(--ic-accent-soft); --hue-ink: var(--ic-accent-ink); --hue-line: var(--ic-accent-line); --blob: #c4b5fd;
	position: relative; overflow: hidden; background: var(--ic-card); color: var(--ic-text); border-radius: 22px; padding: 26px 28px 28px;
	box-shadow: var(--ic-shadow-card); border-bottom: 6px solid var(--hue-line);
	display: flex; flex-direction: column; gap: 0; transition: box-shadow .2s, transform .2s; }
.ic-card:hover { box-shadow: var(--ic-shadow-hover); transform: translateY(-3px) rotate(-.3deg); }
.ic-card::before { content: ""; position: absolute; z-index: 0; width: 260px; height: 260px; border-radius: 50%; right: -90px; top: -120px; background: var(--blob); opacity: .34; pointer-events: none; transition: transform .3s; }
.ic-card.blob-left::before { right: auto; left: -100px; top: auto; bottom: -130px; }
.ic-card:hover::before { transform: scale(1.08); }
.ic-card > * { position: relative; z-index: 1; }
.ic-card.still, .ic-card.still:hover { transform: none; }

.ic-card.indigo { --hue: var(--ic-accent); --hue-soft: var(--ic-accent-soft); --hue-ink: var(--ic-accent-ink); --hue-line: var(--ic-accent-line); --blob: #c4b5fd; }
.ic-card.emerald { --hue: var(--ic-emerald); --hue-soft: var(--ic-em-soft); --hue-ink: var(--ic-em-ink); --hue-line: var(--ic-em-line); --blob: var(--ic-em-line); }
.ic-card.amber { --hue: var(--ic-amber); --hue-soft: var(--ic-amber-soft); --hue-ink: var(--ic-amber-ink); --hue-line: var(--ic-amber-line); --blob: #fde047; }
.ic-card.rose { --hue: var(--ic-rose); --hue-soft: var(--ic-rose-soft); --hue-ink: var(--ic-rose-ink); --hue-line: var(--ic-rose-line); --blob: #fda4af; }
.ic-card.sky { --hue: var(--ic-sky); --hue-soft: var(--ic-sky-soft); --hue-ink: var(--ic-sky-ink); --hue-line: var(--ic-sky-line); --blob: var(--ic-sky-line); }
/* --hue set inline (the store's products carry their own colour) */
.ic-card.from-hue { --hue-soft: color-mix(in srgb, var(--hue) 9%, var(--ic-card)); --hue-ink: color-mix(in srgb, var(--hue) 72%, #000); --hue-line: color-mix(in srgb, var(--hue) 38%, var(--ic-card)); --blob: color-mix(in srgb, var(--hue) 48%, var(--ic-card)); }

/* text */
.ic-kicker { display: inline-block; align-self: flex-start; margin: 0 0 12px; font: 700 11px/1 sans-serif; font-family: inherit; letter-spacing: .14em; text-transform: uppercase; color: var(--hue-ink); background: var(--hue-soft); border: 1px solid var(--hue-line); border-radius: 999px; padding: 7px 11px; }
.ic-card h2 { margin: 0 0 10px; font-size: 26px; line-height: 1.2; font-weight: 700; letter-spacing: -.015em; color: var(--ic-ink); text-transform: none; text-align: left; }
/* global.css colours every link in main with a three-class selector and
   !important; these carry three classes too, so they win */
main .ic-wrap .ic-card h2 a:not(.no-highlight) { color: inherit !important; text-decoration: none !important; }
main .ic-wrap .ic-card h2 a:not(.no-highlight):hover { color: var(--hue) !important; }
.ic-card p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.6; color: var(--ic-text-2); }
.ic-card p:last-child { margin-bottom: 0; }
.ic-card p strong { color: var(--ic-ink); font-weight: 700; }
main .ic-wrap .ic-card p a:not(.ic-button), main .ic-wrap .ic-card li a:not(.ic-button) { color: var(--ic-accent) !important; font-weight: 600; }
main .ic-wrap .ic-card p a:not(.ic-button):hover, main .ic-wrap .ic-card li a:not(.ic-button):hover { color: var(--ic-accent-ink) !important; }
.ic-fine { font-size: 13.5px !important; color: var(--ic-muted) !important; }

/* chips and stickers */
.ic-chips { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ic-chips li { font: 600 12.5px/1 sans-serif; font-family: inherit; color: var(--hue-ink); background: var(--hue-soft); border: 1px solid var(--hue-line); border-radius: 999px; padding: 6px 11px; white-space: nowrap; }
.ic-chips.big li { font-size: 14px; padding: 9px 14px; }
.ic-sticker { position: absolute; right: 18px; top: 18px; z-index: 2; /* above the card's content, below the nav's menus */ transform: rotate(4deg); color: var(--ic-ink); background: #f59e0b; font: 700 11px/1 sans-serif; font-family: inherit; letter-spacing: .12em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; box-shadow: 0 8px 18px -8px rgba(245,158,11,.9); white-space: nowrap; }
.ic-sticker.green { background: #10b981; color: #fff; box-shadow: 0 8px 18px -8px rgba(16,185,129,.8); transform: rotate(3deg); }

/* checklists and link lists */
.ic-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ic-checks li { position: relative; padding-left: 34px; font-size: 16px; line-height: 1.45; color: var(--ic-text); font-weight: 600; }
.ic-checks li::before { content: "\2713"; position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; font-weight: 700; color: #fff; background: linear-gradient(160deg, var(--ic-emerald), #34d399); transform: rotate(-4deg); box-shadow: 0 4px 10px -4px rgba(5,150,105,.7); }
.ic-links { list-style: none; margin: 0; padding: 0; }
.ic-links li { padding: 10px 0; border-bottom: 1px solid var(--ic-rule-2); font-size: 16px; font-weight: 500; }
.ic-links li:last-child { border-bottom: 0; }
main .ic-links li a { display: block; position: relative; padding-right: 26px; }
main .ic-links li a::after { content: "\2192"; position: absolute; right: 6px; top: 0; opacity: 0; transform: translateX(-6px); transition: opacity .15s, transform .15s; }
main .ic-links li a:hover::after { opacity: 1; transform: none; }

/* actions */
.ic-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; padding-top: 4px; }
main .ic-actions a.ic-button, main a.ic-button { display: inline-block; padding: 12px 22px; border-radius: 999px; background: var(--hue, var(--ic-accent)); color: #fff !important; font-weight: 700; font-size: 14.5px; line-height: 1; text-decoration: none !important; box-shadow: 0 10px 20px -12px var(--hue, var(--ic-accent)); transition: transform .15s, box-shadow .15s, filter .15s; cursor: pointer; border: 0; font-family: inherit; }
main .ic-actions a.ic-button:hover, main a.ic-button:hover { color: #fff !important; filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 14px 26px -12px var(--hue, var(--ic-accent)); }
main .ic-actions a.ic-button.ghost, main a.ic-button.ghost { background: transparent; color: var(--hue-ink, var(--ic-accent-ink)) !important; box-shadow: inset 0 0 0 1.5px var(--hue-line, var(--ic-accent-line)); }
main .ic-actions a.ic-button.ghost:hover, main a.ic-button.ghost:hover { color: var(--hue, var(--ic-accent)) !important; box-shadow: inset 0 0 0 1.5px var(--hue, var(--ic-accent)); filter: none; }
main .ic-actions button.ic-button { display: inline-block; padding: 12px 22px; border-radius: 999px; background: transparent; color: var(--hue-ink) !important; font: 700 14.5px/1 sans-serif; font-family: inherit; border: 0; box-shadow: inset 0 0 0 1.5px var(--hue-line); cursor: pointer; transition: box-shadow .15s, color .15s; }
main .ic-actions button.ic-button:hover { color: var(--hue) !important; box-shadow: inset 0 0 0 1.5px var(--hue); }

/* the site's social icons, when they sit in a card */
.ic-card .row.justify-content-center { margin: 0; }
.ic-card .row.justify-content-center .col-2 { flex: 0 0 auto; width: auto; max-width: none; padding: 0 2px; }
.ic-card .row.justify-content-center + br { display: none; }
/* hover tiles that tip, and each icon in its brand color, like the footer's (global.css) */
.ic-card .row.justify-content-center .col-2 a { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; transition: background .15s, transform .35s cubic-bezier(.34,1.56,.64,1); }
.ic-card .row.justify-content-center .col-2 a:hover { background: var(--ic-accent-tint); transform: translateY(-3px) rotate(-8deg); }
.ic-card .row.justify-content-center .mdi { transition: color .15s; }
@media (prefers-reduced-motion: reduce) {
	.ic-card .row.justify-content-center .col-2 a { transition: none; }
	.ic-card .row.justify-content-center .col-2 a:hover { transform: none; }
}
.ic-social { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

/* ---- store ------------------------------------------------------------------ */
.store-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 30px; }
.store-filter button { font: 700 14px/1 sans-serif; font-family: inherit; color: var(--ic-ink); background: var(--ic-card); border: 1px solid var(--ic-rule-2); border-radius: 999px; padding: 11px 18px; cursor: pointer; box-shadow: 0 2px 6px -2px rgba(30,27,75,.15); transition: background .15s, color .15s, transform .15s, box-shadow .15s; }
.store-filter button:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(30,27,75,.5); border-color: var(--ic-accent); color: var(--ic-accent); }
.store-filter button.selected, .store-filter button.selected:hover { background: var(--ic-kicker-bg); color: #fff; border-color: var(--ic-kicker-bg); box-shadow: 0 8px 18px -8px rgba(30,27,75,.6); }
.store-grid.row { margin: 0 -13px; }
.store-grid .product-outer { padding: 0 13px; margin-bottom: 26px; }
.store-grid .product-outer:hover { cursor: pointer; }
.product-card { padding: 22px 24px 26px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.product-card .product-media { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.product-card .product-cover { display: block; width: min(60%, 260px); height: auto; border-radius: 10px; box-shadow: 0 16px 34px -18px rgba(30,27,75,.55); transform: rotate(-1.5deg); transition: transform .2s; }
.product-card:hover .product-cover { transform: rotate(0deg) translateY(-3px); }
.product-card .price { position: absolute; left: 0; bottom: 8px; display: inline-flex; align-items: baseline; gap: 8px; background: var(--ic-kicker-bg); color: #fff; border-radius: 12px; padding: 10px 14px; box-shadow: 0 10px 20px -10px rgba(30,27,75,.7); transform: rotate(-3deg); }
.product-card .price b { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.product-card .price s { font-size: 13px; opacity: .65; }
.product-card .product-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 8px; }
.product-card .product-head .ic-kicker { margin: 0; }
.product-card .sold { font: 600 12px/1 sans-serif; font-family: inherit; color: var(--ic-amber-ink); background: var(--ic-amber-soft); border: 1px solid var(--ic-amber-line); border-radius: 999px; padding: 6px 10px; }
.product-card h2 { font-size: 24px; }
.product-card .by { font-size: 13.5px; color: var(--ic-muted); margin: -4px 0 10px; }
.product-card .product-blurb { font-size: 16.5px; font-weight: 700; color: var(--ic-ink); margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.product-card .product-desc { font-size: 15px; line-height: 1.6; color: var(--ic-text-2); margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.product-card .product-desc p { margin: 0 0 8px; font-size: inherit; }
.product-card .product-desc p:last-child { margin: 0; }
.product-card .ic-actions { margin-top: 0; }
.product-card .gumroad-button .logo-full, .product-card span.gumroad-button-logo { display: none !important; background-image: none !important; }
.store-fine { margin: 6px auto 0; text-align: center; font-size: 14px; color: var(--ic-muted); }
main .store-fine a { color: var(--ic-accent) !important; font-weight: 600; }

/* ---- about ----------------------------------------------------------------- */
.about-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.about-me { align-items: center; text-align: center; }
.about-me .ic-kicker { align-self: center; }
.about-me .headshot { width: 220px; height: 220px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 6px var(--ic-card), 0 0 0 10px var(--hue-line), 0 24px 40px -20px rgba(30,27,75,.5); transform: rotate(-2deg); margin: 6px 0 22px; }
.about-me .row.justify-content-center { justify-content: center; }
.about-bio { margin: 0 0 18px; }
.about-bio h2 { margin: 0 0 8px; font-size: 22px; text-align: center; }
.about-bio p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ic-lead); }
.about-what .lead-para { font-size: 17.5px; line-height: 1.65; color: var(--ic-lead); margin-bottom: 18px; }
.about-hopes { font: 700 11px/1 sans-serif; font-family: inherit; letter-spacing: .14em; text-transform: uppercase; color: var(--ic-muted); margin: 0 0 12px; }
.about-more { margin-top: 26px; }
.about-more .ic-card { padding: 22px 24px 24px; }
.about-more h2 { font-size: 21px; }
.about-more p { margin-bottom: 12px; }

/* ---- contact and write for us ---------------------------------------------- */
.contact-grid .ic-card h2 { font-size: 24px; }
.email-big { font: 600 15px/1 "Cascadia Mono", Menlo, Consolas, monospace; word-break: break-all; }
.wfu-topics .ic-chips { margin: 4px 0 0; }
.wfu-grid .ic-card h2 { font-size: 24px; }

@media (max-width: 960px) {
	.ic-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.about-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
	.ic-grid, .ic-grid.three { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.ic-card { padding: 22px 18px 24px; border-radius: 18px; }
	.ic-card h2, .product-card h2 { font-size: 22px; }
	.product-card .product-cover { width: min(70%, 240px); }
	.about-me .headshot { width: 180px; height: 180px; }
}

/* ---- the error page: one card of places to go ---------------------------------- */
.error-card { max-width: 620px; margin: 0 auto 56px; }