/* Chaotic Fish Design — base CSS starting point*/

/*** Fonts ***/
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/* Caveat — brush accent font (tagline, process/CTA headings). */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

:root {
  --cf-orange: #f77605;
  --cf-purple: #721a82;
  --cf-teal: #05b5c3;
  --cf-yellow: #fcd602;
  --cf-cream: #f8f0ea;
  --cf-ink: #1f1f1c;
  --cf-ink-soft: #2c2c2a;
  --font-ui: 'Atkinson Hyperlegible', sans-serif;
  --font-voice: 'Caveat', cursive;
  --font-mono: 'Space Mono', monospace;
  --font-brush: 'Caveat', cursive;
  --cf-text-muted: #5f5e5a;
  --header-height: 4.5rem;
  --font-sans: 'Work Sans', system-ui, sans-serif;
  --search-overlay-bg: rgba(15, 15, 20, 0.9);
  --search-overlay-text: #fff;
  --search-overlay-accent: #e3e3e3;
  --section-pad-y: clamp(1.5rem, 6vw, 2rem);
  --section-pad-x: clamp(1.5rem, 4vw, 3rem);
}

/*=== Base typography & utilities ===*/
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce) {
  html {scroll-behavior: auto;}
}
[id]{scroll-margin-top:var(--header-height);}
.com-content-article__body,
.com-content-article__body li,
.com-content-article__body p{font-family:var(--font-ui);}
h1,h2,h3,h4,h5,h6 {font-family: var(--font-voice);}
.image-left{float:left; margin:0 1rem 1rem 0;}
.image-right{float:right; margin:0 0 1rem 1rem;}
.image-center{margin:1rem auto;}
.clearbreak,.clearboth{clear:both;}
.buttons--centered{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:1.5rem}
.button{background-color:var(--cf-orange);border-radius:4px;color:var(--cf-ink);display:inline-block;font-family:var(--font-sans);font-weight:600;padding:.75em 1.5em;text-decoration:none;transition:.2s ease}
.button:focus-visible{outline:3px solid var(--cf-ink);outline-offset:2px}
.button:hover{background-color:var(--cf-purple);color:var(--cf-cream);}
.button--disabled,
.button[aria-disabled="true"]{background-color:#c7c2b8;color:#6b6558;cursor:not-allowed;pointer-events:none}
.button--secondary{background-color:var(--cf-purple);color:var(--cf-cream)}
.button--secondary:hover{background-color:var(--cf-ink)}
a.button:focus, a.button:active {color:var(--cf-cream)}
.t4-main-body {background:var(--cf-cream);margin-top:0; padding-top:0;}
/* Focus Override */
.breadcrumb-item.active,
.a11y-toolbar__skip:focus,
.t4-megamenu .navbar-nav>li>a:focus,
.t4-megamenu .navbar-nav>li>.nav-link:focus,
.t4-megamenu .navbar-nav>li>a:active{color:var(--cf-yellow);}

/* === Sample Pages === */
body.samples figure.pull-left.item-image {max-width:35%;}
body.samples .com-content-article {display: flow-root;}

/*=== Shared: torn-paper edge utility ===*/
.cf-torn-edge-wrap{display:block;width:100%}
.cf-torn-edge-wrap--shadow-bottom{filter:drop-shadow(0 -4px 4px rgba(0,0,0,.5))}
.cf-torn-edge-wrap--shadow-top{filter:drop-shadow(0 4px 4px rgba(0,0,0,.5));transform:scaleY(-1)}
.cf-torn-edge{clip-path:polygon(0% 100%,0% 10px,5% 22px,10% 6px,15% 26px,20% 12px,25% 4px,30% 20px,35% 8px,40% 24px,45% 14px,50% 6px,55% 28px,60% 10px,65% 18px,70% 4px,75% 24px,80% 12px,85% 20px,90% 8px,95% 26px,100% 14px,100% 100%);display:block;height:30px;width:100%}
.cf-torn-edge--ink{background:var(--cf-ink)}
.cf-torn-edge--cream{background:var(--cf-cream)}
.cf-torn-edge--ink-soft{background:var(--cf-ink-soft)}
.cf-torn-edge--orange{background:var(--cf-orange)}

/*=== Shared: accent-word + squiggle utility ===*/
.cf-word-accent{display:inline-block;position:relative}
.cf-word-accent--orange{color:var(--cf-orange)}
.cf-word-accent--purple{color:var(--cf-purple)}
.cf-squiggle{bottom:-.15em;height:.35em;left:0;position:absolute;width:100%}
.cf-squiggle path{stroke:currentColor}

/*=== Shared: brush CTA button ===*/
/* One component; colors come from custom properties so presets are just variable swaps. 
Default: orange -> purple, ink label -> cream.
   --purple: purple -> orange, cream label -> ink.
   --ink: ink -> purple, label stays cream, softer shine.
Modifiers: 
   --lg (2rem label), 
   --flip (mirrored brush), 
   --pulse (pulse on hover/focus). 
Sections only set --btn-min-w or layering. */
.cf-brush-btn{align-items:center;aspect-ratio:1000/329.9;display:inline-flex;font-family:var(--font-brush);font-weight:600;justify-content:center;min-width:var(--btn-min-w,300px);position:relative;text-decoration:none;}
.cf-brush-btn .cf-cta-bg{background:var(--btn-bg,var(--cf-orange));inset:0;-webkit-mask:url('/images/buttons/orange-brush.svg') center/100% 100% no-repeat;mask:url('/images/buttons/orange-brush.svg') center/100% 100% no-repeat;overflow:hidden;position:absolute;transition:background-color .35s ease;z-index:0;}
.cf-brush-btn .cf-cta-bg::after{background:linear-gradient(115deg, transparent 35%, rgba(248,240,234,var(--btn-shine,.55)) 50%, transparent 65%);content:'';inset:0;position:absolute;transform:translateX(-130%);transition:transform .6s ease;}
.cf-brush-btn .cf-cta-label{color:var(--btn-fg,var(--cf-ink));font-size:var(--btn-size,1.5rem);padding:.5rem 1.75rem;position:relative;text-shadow:1px 2px 1px var(--btn-shadow,var(--cf-cream));transition:color .35s ease;z-index:1;}
.cf-brush-btn:hover .cf-cta-bg,.cf-brush-btn:focus-visible .cf-cta-bg{background:var(--btn-bg-hover,var(--cf-purple));}
.cf-brush-btn:hover .cf-cta-bg::after,.cf-brush-btn:focus-visible .cf-cta-bg::after{transform:translateX(130%);}
.cf-brush-btn:hover .cf-cta-label,.cf-brush-btn:focus-visible .cf-cta-label{color:var(--btn-fg-hover,var(--cf-cream));text-shadow:1px 2px 1px var(--btn-shadow-hover,var(--cf-ink));}
.cf-brush-btn--purple{--btn-bg:var(--cf-purple);--btn-bg-hover:var(--cf-orange);--btn-fg:var(--cf-cream);--btn-fg-hover:var(--cf-ink);--btn-shadow:var(--cf-ink);--btn-shadow-hover:var(--cf-cream);}
.cf-brush-btn--ink{--btn-bg:var(--cf-ink);--btn-fg:var(--cf-cream);--btn-shadow:var(--cf-ink);--btn-shine:.35;}
.cf-brush-btn--lg{--btn-size:2rem;}
.cf-brush-btn--flip .cf-cta-bg{transform:scaleX(-1);}
.cf-brush-btn--pulse:hover,.cf-brush-btn--pulse:focus-visible{animation:cf-cta-pulse 1.1s ease-in-out infinite;}
html.a11y-font body .cf-brush-btn .cf-cta-label{font-size:1rem;}

@keyframes cf-cta-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.035);
  }
}

/* Add inside the existing prefers-reduced-motion block */
@media (prefers-reduced-motion: reduce) {
  .cf-brush-btn--pulse:hover,
  .cf-brush-btn--pulse:focus-visible {
    animation: none;
  }
  .cf-brush-btn .cf-cta-bg::after {
    transition: none;
  }
}

/*=== Header ===*/
.t4-header .t4-row{align-items:center}
.t4-header{background:var(--cf-ink); border-bottom:1px solid rgba(248,240,234,.12);}
.t4-header .header-block,
.t4-section-inner.container-fluid .header-block{align-items:center;display:flex;min-height:var(--header-height)}
.t4-header .logo-image img{height:44px; padding:0; width:auto;}
.t4-header .nav-link{color:var(--cf-cream); font-family:var(--font-ui); transition:color .2s ease;}
.t4-megamenu .navbar-nav>li>a:hover,
.t4-megamenu .navbar-nav>li>.nav-link:hover{color:var(--cf-orange);}
.t4-megamenu .navbar-nav>li.active>a,
.t4-megamenu .navbar-nav>li.active>.nav-link{background: var(--cf-purple);color: var(--cf-cream);border-radius: .5rem 0;}
.t4-megamenu .navbar-nav>li>a,
.t4-megamenu .navbar-nav>li>.nav-link {color:var(--cf-cream);height:initial; line-height:initial;padding:.5rem 1rem;}
#t4-header.t4-sticky {transition:.5s all;}
.not-at-top #t4-header.t4-sticky {background:var(--cf-ink-soft);}
/* Level 1 */
.t4-megamenu.animate.slide .dropdown .dropdown-menu>div {min-width:250px;}
.t4-megamenu .dropdown-menu{background:var(--cf-cream);border-radius:0 0 .5rem .5rem;border-top:3px solid var(--cf-orange);box-shadow:0 .75rem 1.5rem rgb(31 31 28/.12);padding:.4rem}
.t4-megamenu .dropdown-menu li>a{border-radius:.25rem;position:relative;transition:background-color .25s ease,color .25s ease,text-indent .25s ease}
/*.t4-megamenu .dropdown-menu li>a::before{background:var(--cf-orange);border-radius:2px;bottom:.4rem;content:"";left:.35rem;position:absolute;top:.4rem;transform:scaleY(0);transition:transform .25s ease;width:3px}*/
.t4-megamenu .dropdown-menu li.active>a{color:var(--cf-purple);font-weight:600}
.t4-megamenu .dropdown-menu li.active>a::before,
.t4-megamenu .dropdown-menu li>a:hover::before,
.t4-megamenu .dropdown-menu li>a:focus-visible::before{transform:scaleY(1)}
.t4-megamenu .dropdown-menu li>a:hover,
.t4-megamenu .dropdown-menu li .dropdown-item:hover,
.t4-megamenu .dropdown-menu li>a:focus-visible,
.t4-megamenu .dropdown-menu li>.nav-link:hover{background:var(--cf-purple);color:var(--cf-cream);outline:2px solid var(--cf-orange);outline-offset:2px;text-indent:.5rem}
@media (prefers-reduced-motion: reduce) {
  .t4-megamenu .dropdown-menu li>a,.t4-megamenu .dropdown-menu li>a::before{transition:none}
}

/*=== Breadcrumbs ===*/
.t4-section.t4-breadcrumbs {border-top: 1px solid var(--cf-orange);background: var(--cf-purple);color:var(--cf-cream)}
.t4-section.t4-breadcrumbs a {color:var(--cf-yellow); padding:.2rem;transition:.4s all}
.t4-section.t4-breadcrumbs a:hover {background:var(--cf-orange);border-radius:.25rem;color:var(--cf-purple); transition:.4s all}
                            
/*=== Footer ===*/
.t4-footer{background:#14100F; color:#E7DCC9; font-family:var(--font-sans); padding:clamp(3rem,6vw,5rem) 0 0;}
.t4-footer a{color:#E7DCC9; text-decoration:none; transition:color .2s ease;}
.t4-footer a:hover,.t4-footer a:focus-visible{color:#E8B34A;}
.t4-footer h4,.t4-footer .module-title{color:#FBF6EE; font-family:var(--font-voice); font-size:1rem; font-style:italic; font-weight:600; letter-spacing:.08em; margin-bottom:1.25rem; text-transform:uppercase;}
.t4-footer p,.t4-footer li{line-height:1.6;}
.t4-footer ul{list-style:none; margin:0; padding:0;}
.t4-footer ul li{margin-bottom:.5rem;}

.t4-footer .site-footer-social{display:flex; gap:1rem; margin-top:1rem;}
.t4-footer .site-footer-social a{align-items:center; background:rgba(251,246,238,0.08); border-radius:50%; display:flex; font-size:1rem; height:2.5rem; justify-content:center; transition:background .2s ease,color .2s ease; width:2.5rem;}
.t4-footer .site-footer-social a:hover,.t4-footer .site-footer-social a:focus-visible{background:#E8B34A; color:#14100F;}

.t4-footer .t4-copyright,
.t4-footer .site-footer-bottom{background:rgba(0,0,0,0.3); border-top:1px solid rgba(251,246,238,0.08); margin-top:clamp(2rem,4vw,3.5rem); padding:1.5rem 0; text-align:center;}
.t4-footer .t4-copyright p,
.t4-footer .site-footer-bottom p{color:rgba(231,220,201,0.5); margin:0 0 .25rem;}
.t4-footer .t4-copyright p:last-child,
.t4-footer .site-footer-bottom p:last-child{margin-bottom:0;}
.t4-footer .site-footer-tagline{color:#E8B34A; font-family:var(--font-voice); font-style:italic;}

.t4-footer ul a{background-image:linear-gradient(#E8B34A,#E8B34A); background-position:0 100%; background-repeat:no-repeat; background-size:0% 1px; padding-bottom:2px; transition:background-size .3s ease,color .2s ease;}
.t4-footer ul a:hover,.t4-footer ul a:focus-visible{background-size:100% 1px;}

/*=== Search (base T4 override — brand-neutral, no changes needed) ===*/
#t4-search{ align-items:center; background:var(--search-overlay-bg); backdrop-filter:blur(6px); display:none; height:100%; justify-content:center; left:0; opacity:0; position:fixed; top:0; transition:opacity 0.25s ease; width:100%; z-index:9999; }
#t4-search.is-open{ opacity:1; }
#t4-search .t4-col{ width:min(720px, 92%); }
#t4-search .module-ct{ margin:0; }
#t4-search .search-container{ margin:0 auto; width:min(720px, 92%); }
#t4-search .mod-finder{ position:relative; width:100%; }
#t4-search .js-finder-search-query.form-control{ background:transparent; border:none; border-bottom:2px solid var(--search-overlay-accent); color:var(--search-overlay-text); font-family:var(--font-ui), sans-serif; font-size:clamp(1.75rem, 4vw, 3rem); font-weight:400; max-width:none; outline:none; padding:0.5rem 3rem 0.75rem 0; transition:border-color 0.2s ease; width:100%; }
#t4-search .js-finder-search-query.form-control:focus{ border-color:var(--search-overlay-text); }
#t4-search .js-finder-search-query::placeholder{ color:var(--search-overlay-accent); font-style:italic; opacity:0.55; }
#t4-search .search-close{ background:none; border:none; color:var(--search-overlay-text); cursor:pointer; font-size:1.5rem; opacity:0.7; padding:0.5rem; position:absolute; right:0; top:0.25rem; transition:opacity 0.2s ease, transform 0.2s ease; }
#t4-search .search-close:focus,
#t4-search .search-close:hover{ opacity:1; transform:rotate(90deg); }
#t4-search .search-enter-hint{ bottom:-2rem; color:var(--search-overlay-accent); font-family:var(--font-sans), sans-serif; font-size:0.7rem; left:0; letter-spacing:0.08em; opacity:0.6; position:absolute; text-transform:uppercase; }
#t4-search .awesomplete{ position:relative; width:100%; }
#t4-search ul[role="listbox"]{ background:#fff; border-radius:6px; box-shadow:0 12px 32px rgba(0, 0, 0, 0.25); color:#111; font-family:var(--font-sans), sans-serif; left:0; list-style:none; margin-top:0.5rem; padding:0.25rem 0; position:absolute; top:100%; width:100%; z-index:1; }
#t4-search ul[role="listbox"] li{ cursor:pointer; padding:0.6rem 1rem; transition:background 0.15s ease; }
#t4-search ul[role="listbox"] li:hover,
#t4-search ul[role="listbox"] li[aria-selected="true"]{ background:rgba(0, 0, 0, 0.05); }

/*=== A11yToolbar (third-party module override) ===*/
button.a11y-toolbar__launcher {border:1px solid var(--cf-cream);}

/*=== CFD page kit ===
  Shared components for module landing pages and demos.
  Wrap the page in .cf-page; every rule is scoped to it, so nothing leaks into the homepage.

  Sections   .cf-hero  .cf-section  .cf-section--tint  .cf-section--ink  .cf-cta
  Type       .cf-eyebrow  .cf-hero-title  .cf-h2  .cf-h3  .cf-lede  .cf-copy  .cf-copy--left  .cf-small  .cf-meta
  Accent     .cf-brush + inline svg.cf-squiggle (brush word with orange underline)
  Contrast   small orange text uses --cf-orange-text (#b04a00, 4.87:1 on cream); dark sections switch back to --cf-orange
  Blocks     .cf-card + .cf-label   .cf-specs (dl with div/dt/dd rows)   .cf-demo (live module slot)
  Changelog  .cf-log (article or details) + .cf-log-head; .cf-log--current highlights the latest release
  Buttons    use the site-wide .button / .button--secondary / .buttons--centered
*/
.cf-page{--cf-orange-text:#b04a00;color:var(--cf-ink);font-family:var(--font-ui)}
.cf-page h1,.cf-page h2,.cf-page h3{font-family:var(--font-ui);font-weight:700}
.cf-page .cf-eyebrow,.cf-page .cf-label,.cf-page .cf-meta,.cf-page .cf-specs dt{font-family:var(--font-mono,'Space Mono',monospace);font-weight:700;letter-spacing:.05em}
.cf-page .cf-eyebrow{color:var(--cf-orange-text);font-size:.8rem;margin:0 0 .75rem}
.cf-page .cf-hero{background:var(--cf-cream);padding:clamp(2rem,8vw,4rem) 0}
.cf-page .cf-hero:has(.cf-demo){padding-bottom:0}
.cf-page .cf-hero-title{font-size:clamp(2.5rem,6vw,4.5rem);line-height:1.05;margin:0 0 1.5rem}
.cf-page .cf-brush{color:var(--cf-purple);display:inline-block;font-family:var(--font-voice,'Caveat',cursive);font-size:1.2em;line-height:1;position:relative}
.cf-page .cf-squiggle{bottom:-.3em;height:.35em;left:0;position:absolute;width:100%}
.cf-page .cf-squiggle path{stroke:var(--cf-orange)}
.cf-page .cf-lede{font-size:clamp(1.15rem,2vw,1.4rem);font-weight:700;margin:0 auto 1rem;max-width:40rem}
.cf-page .cf-copy{color:var(--cf-text-muted,#5b5750);font-size:1.05rem;line-height:1.65;margin:0 auto 1rem;max-width:40rem}
.cf-page .cf-copy--left{margin-left:0}
.cf-page .cf-meta{color:var(--cf-text-muted,#5b5750);font-size:.75rem;font-weight:400;margin:1.25rem 0 0}
.cf-page .cf-demo{margin-top:clamp(2.5rem,6vw,4rem)}
.cf-page .cf-section{padding:clamp(3rem,7vw,5rem) 0}
.cf-page .cf-section--tint{background:var(--cf-cream)}
.cf-page .cf-section--ink{background:var(--cf-ink-soft);color:var(--cf-cream)}
.cf-page .cf-h2{font-size:clamp(1.75rem,3.5vw,2.5rem);line-height:1.15;margin:0}
.cf-page .cf-h3{font-size:1.15rem;margin:0 0 .4rem}
.cf-page .cf-small{color:var(--cf-text-muted,#5b5750);font-size:.95rem;line-height:1.5;margin:0}
.cf-page .cf-card{background:#fff;border:1px solid rgb(31 31 28/.08);border-radius:6px;height:100%;padding:1.5rem;transition:border-color .2s ease,transform .2s ease}
.cf-page .cf-card:hover{border-color:var(--cf-orange);transform:translateY(-3px)}
.cf-page .cf-card h3{font-size:1.15rem;margin:0 0 .5rem}
.cf-page .cf-card p:last-child{color:var(--cf-text-muted,#5b5750);font-size:.95rem;line-height:1.55;margin:0}
.cf-page .cf-label{color:var(--cf-orange-text);font-size:.7rem;margin:0 0 .4rem}
.cf-page .cf-section--ink .cf-h2,.cf-page .cf-cta .cf-h2{color:var(--cf-cream)}
.cf-page .cf-section--ink .cf-brush,.cf-page .cf-section--ink .cf-eyebrow,.cf-page .cf-section--ink .cf-label,.cf-page .cf-cta .cf-brush,.cf-page .cf-cta .cf-eyebrow{color:var(--cf-orange)}
.cf-page .cf-section--ink .cf-squiggle path,.cf-page .cf-cta .cf-squiggle path{stroke:var(--cf-cream)}
.cf-page .cf-section--ink .cf-small,.cf-page .cf-section--ink .cf-copy{color:rgb(248 240 234/.75)}
.cf-page .cf-section--ink dd a {color:var(--cf-yellow)}
.cf-page .cf-specs{margin:0}
.cf-page .cf-specs div{border-top:1px solid rgb(248 240 234/.15);display:grid;gap:.25rem 1.5rem;grid-template-columns:minmax(8rem,12rem) 1fr;padding:.9rem 0}
.cf-page .cf-specs dt{color:var(--cf-orange);font-size:.8rem}
.cf-page .cf-specs dd{margin:0}
.cf-page .cf-cta{background:var(--cf-ink);color:var(--cf-cream);padding:clamp(3rem,7vw,5rem) 0 clamp(1rem,2vw,1.5rem);text-align:center}
.cf-page .cf-cta .cf-h2{margin:0 0 1.5rem}
.cf-page .cf-cta .button--secondary:hover,.cf-page .cf-cta .button--secondary:focus-visible{background-color:var(--cf-cream);color:var(--cf-ink)}
/* Changelog */
.cf-page .cf-log{background:#fff;border:1px solid rgb(31 31 28/.08);border-radius:6px;margin:0 0 .75rem;padding:1rem 1.5rem}
.cf-page .cf-log--current{border-color:var(--cf-orange);border-width:2px;padding:1.5rem}
.cf-page .cf-log-head{align-items:baseline;display:flex;flex-wrap:wrap;gap:.25rem 1rem;margin:0}
.cf-page .cf-log-head .cf-h3,.cf-page .cf-log-head .cf-label{margin:0}
.cf-page .cf-log--current .cf-log-head{margin:0 0 .75rem}
.cf-page summary.cf-log-head{cursor:pointer;list-style:none}
.cf-page summary.cf-log-head::-webkit-details-marker{display:none}
.cf-page summary.cf-log-head::before{color:var(--cf-orange-text);content:"\25B8";display:inline-block;transition:transform .2s ease}
.cf-page details[open]>summary.cf-log-head::before{transform:rotate(90deg)}
.cf-page summary.cf-log-head:focus-visible{outline:3px solid var(--cf-orange);outline-offset:4px}
.cf-page details.cf-log>ul{margin:.75rem 0 0}
.cf-page .cf-log ul{color:var(--cf-text-muted,#5b5750);line-height:1.6;margin:0;padding-left:1.25rem}
.cf-page .cf-log li+li{margin-top:.35rem}
.cf-page .cf-log code{background:var(--cf-cream);border-radius:3px;font-size:.88em;padding:.1em .35em}
.cf-page .cf-card h3 a{color:var(--cf-purple);text-underline-offset:3px}
.cf-page .cf-cta .cf-meta{color:rgb(248 240 234/.65)}
/* Code */
.cf-page .cf-code{background:var(--cf-ink);border-radius:6px;color:var(--cf-cream);font-family:var(--font-mono,'Space Mono',monospace);font-size:.85rem;line-height:1.6;margin:.75rem 0 0;overflow-x:auto;padding:1rem 1.25rem;white-space:pre}
.cf-page .cf-code code{background:none;color:inherit;padding:0}
.cf-page .cf-code mark{background:none;color:var(--cf-orange);font-weight:700}
.cf-page code{background:rgb(31 31 28/.07);border-radius:3px;font-size:.88em;padding:.1em .35em}
.cf-page .cf-section--ink code{background:rgb(248 240 234/.12);color:var(--cf-orange);}
.cf-page .cf-card a:not(.button),.cf-page .cf-copy a{color:var(--cf-purple);text-underline-offset:3px}
.cf-page .cf-img-square{aspect-ratio:1/1;height:auto;object-fit:cover;object-position:top;width:100%}

/*=== Page kit: team member cards ===
  .cf-member on a .cf-card. Accent via modifier: --orange (default) --purple --teal --yellow
  Parts: .cf-member-avatar  .cf-member-type (Human / AI / Critter pill)  .cf-member-title  .cf-member-bio  .cf-member-skills  .cf-member-links
*/
.cf-page .cf-member{--cf-accent:var(--cf-orange);--cf-accent-fg:var(--cf-ink);align-items:center;border-top:4px solid var(--cf-accent);display:flex;flex-direction:column;text-align:center}
.cf-page .cf-member--purple{--cf-accent:var(--cf-purple);--cf-accent-fg:var(--cf-cream)}
.cf-page .cf-member--teal{--cf-accent:var(--cf-teal)}
.cf-page .cf-member--yellow{--cf-accent:var(--cf-yellow)}
.cf-page .cf-member:hover{border-color:var(--cf-accent)}
.cf-page .cf-member-avatar{background:var(--cf-ink);border:4px solid var(--cf-accent);border-radius:50%;display:block;height:128px;margin:0 0 1rem;object-fit:cover;width:128px}
.cf-page .cf-member--photo .cf-member-avatar{aspect-ratio:1/1;border:0;border-radius:0;height:auto;margin:-1.5rem -1.5rem 1.25rem;max-width:none;object-fit:cover;width:calc(100% + 3rem)}
.cf-page .cf-member-type{background:var(--cf-accent);border-radius:999px;color:var(--cf-accent-fg);display:inline-block;font-family:var(--font-mono,'Space Mono',monospace);font-size:.7rem;font-weight:700;letter-spacing:.05em;margin:0 0 .75rem;padding:.2rem .75rem;text-transform:uppercase}
.cf-page .cf-member .cf-h3{font-size:1.35rem;margin:0}
.cf-page .cf-member-title{color:var(--cf-purple);font-family:var(--font-voice,'Caveat',cursive);font-size:1.6rem;line-height:1.1;margin:.15rem 0 .35rem}
.cf-page .cf-member .cf-label{margin:0 0 1rem}
.cf-page .cf-member-bio{color:var(--cf-text-muted,#5b5750);font-size:.95rem;line-height:1.55;margin:0 0 1.25rem}
.cf-page .cf-member-skills{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;list-style:none;margin:auto 0 0;padding:0}
.cf-page .cf-member-skills li{background:var(--cf-cream);border-radius:3px;font-size:.8rem;padding:.15rem .5rem}
.cf-page .cf-member-links{display:flex;gap:1.25rem;justify-content:center;list-style:none;margin:1rem 0 0;padding:0}
.cf-page .cf-member-links a{color:var(--cf-purple);font-weight:700;text-underline-offset:3px}
.cf-page .cf-member-links a:focus-visible{outline:3px solid var(--cf-orange);outline-offset:2px}
.cf-page .cf-member-body{align-items:center;display:flex;flex:1;flex-direction:column;width:100%}
 
/* --wide: full-row card, photo left and text right from lg up; stacks like a normal card below that */
@media (min-width: 992px) {
  .cf-page .cf-member--wide {
    align-items: center;
    flex-direction: row;
    overflow: hidden;
    padding: 0;
    text-align: left;
  }
  .cf-page .cf-member--wide .cf-member-avatar {
    align-self: stretch;
    aspect-ratio: auto;
    flex: 0 0 42%;
    margin: 0;
    min-height: 100%;
    width: 42%;
  }
  .cf-page .cf-member--wide .cf-member-body {
    align-items: flex-start;
    padding: 2rem 2.5rem;
  }
  .cf-page .cf-member--wide .cf-member-links,
  .cf-page .cf-member--wide .cf-member-skills {
    justify-content: flex-start;
  }
  .cf-page .cf-member--wide .cf-member-skills {
    margin-top: 0;
  }
}

/* Image Enlarger Grid */
.image-enlarger{border: 1px solid var(--cf-ink);border-radius: 1rem;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));padding: .5rem;position:relative;}
.image-enlarger::before {color:var(--cf-ink);content:'Click a Pic';font-family: var(--font-voice); font-size:.9rem;position:absolute;top:-1.5em;left:1rem;}
.image-enlarger figure{margin:0}
.image-enlarger img{aspect-ratio:1/1;border-radius:6px;display:block;height:auto;object-fit:cover;width:100%}
.image-enlarger figcaption{background:none;color:var(--cf-text-muted);font-size:.9rem;line-height:1.4;margin-top:.5rem; text-shadow:1px 1px 3px rgba(0,0,0,.3);} 

/* === jDownloads === */
section.cf-cta div.jd_content_plugin {border-top:1px dotted var(--cf-orange-text);margin-top:2rem; }
section.cf-cta div.jd_content_plugin .text-muted {color:var(--cf-orange-text) !important;}
section.cf-cta div.jd_content_plugin a.jd_download_url {color: var(--cf-yellow); font-size: 1.75rem;}
.cf-brush-btn:has(a.jdbutton){--btn-min-w:200px;--btn-size:1.15rem;}
.cf-brush-btn .cf-cta-bg a.jdbutton{align-items:center;background:none;border:0;border-radius:0;box-shadow:none;color:var(--btn-fg,var(--cf-ink));display:flex;font-family:inherit;font-size:var(--btn-size,1.5rem);font-weight:inherit;inset:0;justify-content:center;line-height:1;margin:0;padding:0;position:absolute;text-decoration:none;text-shadow:1px 2px 1px var(--btn-shadow,var(--cf-cream));transition:color .35s ease;z-index:1;}
.cf-brush-btn:hover .cf-cta-bg a.jdbutton,.cf-brush-btn .cf-cta-bg a.jdbutton:focus-visible{color:var(--btn-fg-hover,var(--cf-cream));text-shadow:1px 2px 1px var(--btn-shadow-hover,var(--cf-ink));}
.cf-brush-btn:has(a.jdbutton:focus-visible) .cf-cta-bg{background:var(--btn-bg-hover,var(--cf-purple));}
.cf-brush-btn:has(a.jdbutton:focus-visible) .cf-cta-bg::after{transform:translateX(130%);}
html.a11y-font body .cf-brush-btn a.jdbutton{font-size:1rem;}

/*=== Chronoforms ===*/
a.chronocredits {display:none;opacity:0;}

@media (max-width: 575.98px) {
  .cf-page .cf-specs div{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce) {
  .cf-page .cf-card{transition:none}
  .cf-page .cf-card:hover{transform:none}
  .cf-page summary.cf-log-head::before{transition:none}
}

/*=== Animations ===*/
@keyframes fadeInRight {
  from {
    opacity:0;
    transform:translateX(32px);
  }
  to {
    opacity:1;
    transform:translateX(0);
  }
}

.fade-in-right{animation:fadeInRight .7s ease forwards; opacity:0;}
.delay-2{animation-delay:.25s;}
.delay-3{animation-delay:.5s;}

/*=== Accessibility ===*/
@media (prefers-reduced-motion: reduce) {
  .fade-in-right {
    animation:none;
    opacity:1;
    transform:none;
  }
}