/*
  Direction contract — CARETOON homepage · Persuade · code-first
  THESIS: A young creator turns ideas into a voice and finds a community that takes their work seriously.
  OWN-WORLD: A warm illustrated world of hand-drawn character work and authentic photo-toon cut-paper collage, deep ocean-blue ink, leafy-green notes, warm gold fields, teal accents, and softly lifted paper layers.
  STORY: Parents see the origin and care behind CARETOON; young artists see a place for their ideas. They choose learning, tools, community, or another channel without pressure.
  FIRST VIEWPORT: Deep-blue navigation sits above a full-bleed patterned blue-teal stage. Light headline copy and gold emphasis stay at the left; an authentic photo-collage of CARETOON's young artist creating on tablet and paper fills the right and carries across the fold.
  FORM: User-pinned illustrated, character-led and vibrant direction, inspired by the scale and cheerful energy of the Dragão reference. Candidate seed 7a5f7fdd ran degraded after one network-enabled round returned without a usable challenger set. The user's explicit direction remains authoritative. Seven grounded visual forms: adventure picture-book map; original illustrated fantasy-school title screen; independent comic anthology; children's museum workshop mural; sticker-covered sketchbook; art-club festival poster; illustrated zine exchange table. The sixth assigned structure becomes a secondary influence through a bold poster-grid rhythm, not through a replacement of the user's choice.
  FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, DESIGN.md, and every shipping raster carrying its provenance
*/
:root{
  --paper:#fbf8ec;--white:#fffdf6;--ink:#153f56;--muted:#516a6c;--line:#d5ddca;
  --orange:#2e795e;--orange-dark:#205c49;--lav:#e2ece3;--sage:#d3e6d4;--peach:#f1e7bf;
  --violet:#2e795e;--plum:#153f56;--sun:#ddb747;--coral:#c49b3f;--pool:#75b7a8;
  --mint:#bdd9bf;--shadow:0 12px 32px #183f561e;--display:'Manrope','DM Sans',sans-serif;
  --sans:'DM Sans',sans-serif;
}
html{scroll-padding-top:80px}
body{background:var(--paper);color:var(--ink);font-family:var(--sans)}
::selection{background:var(--violet);color:white}
.site-header{background:var(--plum);border:0;box-shadow:0 5px 18px #123a5033}
.nav{height:74px}
.brand{color:#fff9ed;font-size:24px;letter-spacing:-1.5px}
.brand-mark{position:relative;width:32px;height:32px;padding:0;background:transparent;border:0;border-radius:0;overflow:visible;transform:none}
.brand-mark img{width:100%;height:100%;max-width:none;object-fit:cover}
.brand span:last-child{margin-left:0}
.nav-links{color:#fff9ed;gap:29px}
.nav-links a{font-weight:650;position:relative}
.nav-links a:after{position:absolute;content:'';left:0;right:100%;height:2px;bottom:-5px;background:var(--sun);transition:right .2s ease-out}
.nav-links a:hover:after{right:0}
.btn{border-radius:13px;min-height:50px;background:var(--plum);box-shadow:0 4px 0 #0d2f41;color:#fffdf8;font-weight:750;transition:transform .2s ease-out,box-shadow .2s ease-out,background .2s ease-out}
.btn:hover{transform:translateY(-2px);background:#24566a;box-shadow:0 6px 15px #153f5633}
.btn--warm{background:var(--violet);box-shadow:0 4px 0 #205c49;color:white}
.btn--warm:hover{background:#1f6570}
.btn--outline{border:2px solid var(--plum);background:#fffdf6;color:var(--plum);box-shadow:0 3px 0 #c9c9ad}
.btn--outline:hover{background:#f5eccb;color:var(--plum);box-shadow:0 5px 13px #345d4a25}
.eyebrow{display:none}
.hero{position:relative;isolation:isolate;width:100%;max-width:none;min-height:590px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:8px;padding:68px max(30px,calc((100vw - 1160px)/2)) 44px;background:#286273;overflow:hidden}
#hero.hero{background-color:#286273!important}
.hero:before{position:absolute;content:'';z-index:-1;inset:0;background:url('/assets/caretoon-pattern.svg') repeat;background-size:210px 192px;opacity:.9;mask-image:linear-gradient(90deg,#000 2%,#000 31%,transparent 70%)}
.hero-copy{padding:20px 0 36px;max-width:560px}
.hero .display{font-weight:800;font-size:clamp(53px,6.6vw,83px);line-height:.99;letter-spacing:-.058em;max-width:580px;margin:0 0 20px;color:#fffdf6}
.hero .display em{font-family:var(--serif);font-weight:700;font-style:italic;color:#f0cb59;text-decoration:underline;text-decoration-color:#a9d1ad;text-decoration-thickness:.09em;text-underline-offset:.12em}
.hero-copy .lead{max-width:510px;color:#edf2e8;font-size:16px;line-height:1.68;font-weight:600}
.hero-actions{gap:13px}
.hero-actions .btn--warm{background:var(--sun);color:var(--plum);box-shadow:0 4px 0 #a47c2a}
.hero-actions .btn--warm:hover{background:#edc85b}
.hero-actions .btn--outline{background:#fffdf6}
.hero-note{gap:13px;margin-top:27px;color:#e1ece3;font-size:12px}
.hero-note strong{color:#fffdf6}
.hero-note-mark{display:grid;place-items:center;width:43px;height:43px;border:2px solid #fffdf6;border-radius:50%;background:var(--sun);color:var(--plum);font-size:19px;flex:none}
.hero-art{min-height:500px;align-self:center;overflow:visible}
.hero-art:before{width:430px;height:430px;background:#ddbf64;border-radius:45% 55% 55% 45%;transform:rotate(-9deg)}
.hero-art img{width:min(118%,700px);max-width:none;position:relative;right:0;bottom:0;filter:drop-shadow(0 13px 13px #153f561f);animation:caretoon-arrive .8s cubic-bezier(.2,.8,.2,1) both}
.art-label{left:40%;right:auto;bottom:22px;background:#fffdf5;border:2px solid var(--plum);box-shadow:0 6px 18px #153f5625;border-radius:7px 13px 8px 12px;color:var(--plum);font-weight:700;transform:rotate(3deg)}
.spark{z-index:2}
.path-strip{background:var(--plum);border:0;padding:16px 0}
.path-item{color:#fff9ed;font-size:13px;gap:12px}
.path-item b{width:35px;height:35px;background:var(--sun);color:var(--plum);font-family:var(--display);font-weight:850;font-style:normal}
.path-item:nth-of-type(3) b{background:var(--pool)}
.path-item:nth-of-type(5) b{background:#dab258}
.path-item:nth-of-type(7) b{background:#a9cdaa}
.path-item .arrow{color:var(--sun)}
.path-divider{color:#879c92}
.section-head{max-width:720px}
.section-head h2,.method-copy h2,.community-copy h2,.science-copy h2{color:var(--plum);font-weight:800;letter-spacing:-.058em}
.serif{font-family:var(--serif);font-style:italic;color:#2d765f;letter-spacing:-.03em}
.section-head .serif,.method-copy .serif,.community-copy .serif,.science-copy .serif{color:#2e765f}
.story{position:relative;width:100vw;margin-left:calc(50% - 50vw);padding:97px max(30px,calc((100vw - 1160px)/2));background:#3a7480;grid-template-columns:.78fr 1.22fr;gap:76px;align-items:center}
.story-aside blockquote{max-width:410px;color:#fffdf5;font:700 clamp(28px,3.2vw,41px)/1.26 var(--display);letter-spacing:-.048em;margin:17px 0 19px}
.story-aside blockquote em{color:var(--sun);font-family:var(--serif);font-weight:400}
.story-aside cite{color:#edf1df;font-size:13px}
.story-copy p{color:#f8f7eb;font-size:15px}
.story-sign{color:var(--sun);font:italic 20px var(--serif)}
.pillars{background:#c3dfc5}
.pillars:after{right:-25px;top:-87px;font-size:270px;color:#a9cdaa}
.pillars .section-head .lead{color:#395f50}
.pillar-grid{gap:27px}
.pillar-card{background:transparent;border:0;border-radius:0;border-top:3px solid #3e7d73;padding:17px 7px 0 0;min-height:190px}
.pillar-num{color:#327a64;font:700 12px var(--sans);letter-spacing:.04em;margin-bottom:20px;text-transform:uppercase}
.pillar-card h3{font-size:25px;color:var(--plum)}
.pillar-card p{color:#4e6e58}
.method{position:relative;width:100vw;margin-left:calc(50% - 50vw);padding:100px max(30px,calc((100vw - 1160px)/2));background:#d2e8e4;gap:79px}
.method-visual{gap:13px}
.method-card{box-shadow:var(--shadow);border:2px solid var(--plum);border-radius:9px 21px 8px 18px}
.method-card--art{background:#ead17a}
.method-card--mind{background:#e1ebe2}
.method-sticker{border-radius:28% 52% 35% 48%;background:var(--coral);box-shadow:3px 4px 9px #3c514230}
.method-card--mind .method-sticker{background:#4c8b78;box-shadow:3px 4px 9px #234f5734}
.method-card small{color:#566a6d;font-weight:750}
.method-card strong{font-size:28px;color:var(--plum)}
.method-copy .lead{color:#3b6268}
.method-copy li{color:#3d6268}
.method-copy li strong{color:var(--plum)}
.programs{background:#f3e9c8}
.program-grid{gap:24px}
.program-card{position:relative;overflow:hidden;border:2px solid var(--plum);border-radius:9px 24px 11px 22px;background:#fffdf6;box-shadow:var(--shadow);padding:29px;min-height:315px}
.program-card--book{background:#e2ece3}
.program-card .tag{background:#d3e6d4;color:#395f50;font-weight:800}
.program-card--book .tag{background:#dce8dd;color:#315846}
.program-card h3{color:var(--plum);font-size:28px}
.program-card p{color:#586a68}
.book-mark{color:#3a7c67}
.science{gap:74px}
.science-copy .lead{color:#596a70}
.science-stat b{color:#2e795e}
.science-stat span{color:#566a6d}
.science-safety{border-color:var(--coral);color:#54686c}
.science-box{background:#e2ece2;border:2px solid #578676;border-radius:8px 22px 12px 20px;box-shadow:var(--shadow)}
.science-box h3{color:var(--plum)}
.science-box .citation{border-color:#c5d7ca}
.science-box .citation a{color:#286152}
.science-box small{color:#586a68}
.community{background:#e6ca77}
.community-copy h2,.community-copy .serif{color:var(--plum)}
.community-copy p{color:#665d45}
.community-note{color:#665d45!important}
.community-art:before{background:var(--sun)}
.mini-art{border:6px solid #fffdf6;box-shadow:var(--shadow);border-radius:8px 18px 9px 15px}
.closing{background:var(--plum)}
.closing h2{color:#fffdf5}
.closing h2.serif{color:var(--sun)}
.closing .btn{background:var(--sun);color:var(--plum);box-shadow:0 4px 0 #a47c2a}
.footer{background:#102f41}
.footer-col strong{color:var(--sun)}
.footer a:hover{color:var(--sun)}
.page-hero{padding-top:82px}
.page-hero h1{font-weight:800;color:var(--plum);line-height:1;letter-spacing:-.06em}
.page-hero h1 .serif{color:#2d765f}
.page-hero .lead{color:#586a68}
.page-band{background:#f1e4b7}
.page-band .section-head h2{color:var(--plum)}
.detail-grid{gap:21px}
.detail-card{border:0;border-top:3px solid var(--violet);border-radius:0;background:transparent;padding:20px 16px 15px 0}
.detail-card h3{color:var(--plum)}
.detail-card p{color:#566967}
.product-card{border:2px solid var(--plum);border-radius:9px 21px 10px 19px;box-shadow:var(--shadow)}
.product-art{border-bottom:2px solid var(--plum);background:#d3e8df;color:var(--plum)}
.product-card:nth-child(3n+2) .product-art{background:#dce8e1}
.product-card:nth-child(3n) .product-art{background:#eed277}
.product-card .coming-tag{color:#2e795e;font-weight:800}
.product-body h3{color:var(--plum)}
.product-body p{color:#586a68}
.product-body .btn{box-shadow:none}
.tabs{gap:10px;flex-wrap:wrap}
.tab{border:2px solid var(--plum);border-radius:999px;background:#fffdf6;color:var(--plum);font-weight:700}
.tab[aria-selected=true]{background:var(--plum);color:white}
.disclosure,.setup-note{color:#556867}
.setup-note{border:2px solid #c59a3a;background:#f3e9c8;border-radius:10px 17px 10px 14px}
.gallery-placeholder{border:2px dashed #39777a;background:#e2ece3}
.gallery-placeholder .coming-tag{color:#326e63;font-weight:800}
.gallery-placeholder p{color:#586a68}
.gallery-tile{border:2px solid var(--plum);border-radius:8px 18px 10px 17px}
.bio-wrap{max-width:480px}
.links-page{background:radial-gradient(ellipse at 50% 0,#356b78 0,transparent 46%),#153f56}
.bio-head h1{color:#fff9ed;font-size:29px;line-height:1.08}
.bio-head p{color:#dce9e5}
.back-home{color:#f3e8c5}
.bio-logo{width:56px;height:56px;padding:0;background:transparent;border:0;color:var(--plum);box-shadow:none;border-radius:0;overflow:visible}
.bio-logo img{width:100%;height:100%;max-width:none;object-fit:cover}
.bio-link{border:2px solid #fff9ed;background:#fffdf5;border-radius:10px 18px 11px 18px;box-shadow:0 5px 0 #0d2f41;color:var(--plum);font-size:13px}
.bio-link:nth-child(2) .bio-icon{background:#dfebe2}
.bio-link:nth-child(3) .bio-icon{background:#d1e6d7}
.bio-link:nth-child(4) .bio-icon{background:#f0dfa0}
.bio-link:nth-child(5) .bio-icon{background:#d4e9e4}
.bio-link:nth-child(6) .bio-icon{background:#efe2c4}
.bio-icon{color:#2e655b;font-size:16px;font-weight:800}
.bio-link small{color:#516764}
.bio-arrow{color:#306c5f}
.bio-foot{color:#d7e4db}
.bio-foot a{color:var(--sun)}
.links-page .setup-note{color:#53676a;text-align:left}
:focus-visible{outline:3px solid #176b75;outline-offset:3px}
::placeholder{color:#5c7071;opacity:1}
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:#fbf8ec}
::-webkit-scrollbar-thumb{background:#337864;border:3px solid #fbf8ec;border-radius:10px}
.serif,.hero .display em,.story-aside blockquote em,.story-sign,.brand-mark,.pillar-num,.method-card strong,.book-mark,.science-stat b,.bio-logo,.story-copy p:first-of-type:first-letter{font-family:var(--display);font-style:normal}
.serif{font-weight:750}
.hero .display em{font-weight:800}
.story-aside blockquote em,.story-sign,.pillar-num,.method-card strong,.book-mark,.bio-logo,.story-copy p:first-of-type:first-letter{font-weight:700}
@keyframes caretoon-arrive{from{opacity:.85;transform:translateY(13px) rotate(-1deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
@media(max-width:850px){
  .hero{min-height:530px;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);padding-top:53px;gap:18px}
  .hero .display{font-size:clamp(53px,7.3vw,68px)}
  .hero-art{min-height:430px}
  .hero-art:before{width:340px;height:340px}
  .story{gap:45px}
  .method{gap:40px}
}
@media(max-width:760px){
  .nav{position:relative;gap:12px}
  .nav-cta{display:none!important}
  .menu-toggle{display:grid;place-items:center;flex:none;width:46px;height:46px;padding:0;border:1px solid #ffffff55;border-radius:50%;background:#ffffff12;color:#fffdf6;font-size:23px;line-height:1;cursor:pointer}
  .menu-toggle:hover,.menu-toggle[aria-expanded=true]{background:#ffffff24}
  .nav-links{display:none;position:absolute;top:calc(100% + 1px);left:0;right:0;z-index:15;padding:9px 17px 13px;background:var(--plum);border:1px solid #285261;border-radius:0 0 16px 16px;box-shadow:0 13px 22px #102f4155;flex-direction:column;align-items:stretch;gap:0}
  .nav-links.open{display:flex}
  .nav-links a{min-height:48px;display:flex;align-items:center;padding:10px 2px;border-bottom:1px solid #ffffff26;color:#fff9ed;font-size:14px}
  .nav-links a:last-child{border-bottom:0}
}
@media(max-width:640px){
  .brand-mark{width:30px;height:30px}
  .nav{height:67px}
  .nav-links{background:var(--plum);border-color:#285261;box-shadow:0 13px 22px #102f4155}
  .nav-links a{border-color:#285261;color:#fff9ed}
  .nav-cta{display:none}
  .hero{min-height:0;grid-template-columns:1fr;padding:42px 20px 11px}
  .hero:before{background-size:170px 155px;mask-image:linear-gradient(180deg,#000 4%,#000 60%,transparent 88%)}
  .hero-copy{padding:6px 0 0}
  .hero .display{font-size:clamp(48px,13.1vw,65px);max-width:510px;line-height:.98;margin-bottom:15px}
  .hero-copy .lead{font-size:14px;max-width:480px}
  .hero-actions{gap:10px}
  .hero-actions .btn{min-height:48px;padding:0 15px;font-size:12px}
  .hero-note{margin-top:19px;font-size:11px}
  .hero-note-mark{width:37px;height:37px}
  .hero-art{width:calc(100% + 25px);min-height:295px;margin:0 -12px -5px;overflow:hidden}
  .hero-art:before{width:255px;height:255px;right:1%;top:14px}
  .hero-art img{width:min(109%,460px);right:-7px;bottom:-11px}
  .art-label{left:5%;bottom:18px;font-size:12px;padding:8px 11px}
  .path-row{justify-content:flex-start;gap:11px}
  .path-item{font-size:11px}
  .path-divider{display:none}
  .path-item b{width:29px;height:29px}
  .story,.method{width:100vw;margin-left:calc(50% - 50vw);padding:68px 21px}
  .story{gap:17px}
  .story-aside blockquote{font-size:29px;max-width:420px}
  .story-copy p{font-size:14px}
  .pillar-grid{gap:21px}
  .pillar-card{min-height:0;padding-top:12px}
  .pillar-num{margin-bottom:10px}
  .method{gap:20px}
  .method-visual{min-height:245px;max-width:340px}
  .method-card{min-height:220px}
  .method-card strong{font-size:24px}
  .program-card{min-height:275px;padding:22px}
  .science{gap:24px}
  .science-box{padding:23px}
  .community-art{min-height:285px}
  .closing{padding:65px 0}
  .detail-grid{grid-template-columns:1fr}
  .detail-card{padding:14px 5px 12px 0}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-art{height:118px}
  .product-body{padding:12px}
  .product-body h3{font-size:13px}
  .product-body p{font-size:10px;min-height:48px}
  .product-body .btn{min-height:44px;font-size:11px;padding:0 8px}
  .footer{padding-top:39px}
  .bio-links{gap:12px}
  .bio-link{min-height:66px}
}
@media(max-width:420px){
  .shell{width:calc(100% - 32px)}
  .hero{padding-right:16px;padding-left:16px}
  .hero .display{font-size:clamp(43px,12.3vw,54px)}
  .hero-actions{align-items:stretch}
  .hero-actions .btn{flex:1 1 100%;width:100%}
  .path-row{gap:8px}
  .path-item{font-size:10px}
  .product-grid{grid-template-columns:1fr;gap:14px}
  .product-art{height:150px}
  .product-body{padding:16px}
  .product-body h3{font-size:16px}
  .product-body p{font-size:13px;min-height:0}
  .product-body .btn{font-size:12px}
  .bio-link{min-height:68px}
}
@media(max-width:760px){
  html{scroll-padding-top:78px}
  .tabs{max-width:100%;overflow-x:auto;padding:2px 1px 8px;scrollbar-width:thin;scroll-snap-type:x proximity}
  .tab{flex:0 0 auto;min-height:44px;scroll-snap-align:start}
  .page-hero .hero-actions{flex-wrap:wrap}
  .page-hero .hero-actions .btn{min-height:48px}
  .gallery-placeholder{padding:25px 18px}
  [data-gallery-embed]{max-width:100%}
  .footer-links{flex-wrap:wrap}
  .footer-col a{min-height:38px;display:flex;align-items:center}
}
@media(max-width:380px){
  .shell{width:calc(100% - 28px)}
  .nav{gap:8px}
  .brand{gap:6px;font-size:17px}
  .menu-toggle{width:44px;height:44px}
  .hero .display{font-size:clamp(41px,11.8vw,48px)}
  .page-hero h1{font-size:clamp(39px,11vw,48px)}
  .footer-links{gap:10px}
  .footer-col{min-width:130px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}