/* Homepage art direction: editorial type, connected ideas, purposeful motion. */
.visual-home { --paper:#f8f4eb; --ink:#102c32; --rust:#ae422b; color:var(--ink); }
.visual-home h1,.visual-home h2,.visual-home h3 { color:inherit; }
.visual-home em { font-weight:400; }
.visual-home .eyebrow { color:var(--rust); font-size:.72rem; letter-spacing:.15em; font-weight:600; }
.opening { background:var(--paper); position:relative; overflow:hidden; padding-top:var(--nav-height); }
.opening-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:3rem; align-items:center; padding-top:4.6rem; padding-bottom:4rem; }
.opening h1 { font-size:clamp(4rem,7.3vw,6.3rem); line-height:.96; letter-spacing:-.055em; margin:1.5rem 0; }
.opening h1 em { color:var(--rust); }
.opening-summary { max-width:430px; font-size:1.05rem; line-height:1.7; color:#425659; margin-top:1.8rem; }
.opening .hero-cta { gap:1.8rem; margin-top:1.7rem; }
.opening .btn-primary { background:var(--ink); }
.opening-contact { color:var(--ink); border-bottom:1px solid; padding:.55rem 0; }
.portrait-composition { position:relative; padding:1rem 1.2rem 2rem; min-width:0; }
.editorial-portrait { position:relative; z-index:1; margin:0 1rem; transform:rotate(3deg); }
.editorial-portrait img { width:100%; height:auto; display:block; border-radius:48% 48% 3px 3px; border:8px solid #fffaf3; }
.editorial-portrait figcaption { text-align:left; font-family:var(--font-heading); font-style:italic; font-size:.85rem; margin-top:.7rem; }
.portrait-orbit { position:absolute; inset:-4% -4% 0; width:auto; height:auto; background:none; border:1px solid #b8b7a8; border-radius:50%; transform:rotate(-24deg); animation:orbit-arrive 1.8s ease-out both; }
.orbit-cross { position:absolute; right:0; top:-2rem; font-size:5rem; color:var(--rust); z-index:2; line-height:1; }
.portrait-note { position:absolute; z-index:2; left:-2rem; top:9%; background:#f9df9b; padding:1rem 1.2rem .5rem; transform:rotate(-9deg); box-shadow:0 12px 25px #102c3215; }
.portrait-note span { font-size:.55rem; letter-spacing:.12em; }
.portrait-note p { font-family:var(--font-heading); font-size:1.15rem; line-height:1.2; margin:.5rem 0; }
.portrait-note svg { width:110px; height:24px; stroke:#924329; stroke-width:2; fill:none; }
.portrait-project { position:absolute; bottom:0; right:-1rem; z-index:2; display:flex; gap:.7rem; align-items:center; padding:.9rem 1.1rem; background:var(--ink); color:white; transform:rotate(-4deg); box-shadow:0 15px 30px #102c3220; font-size:.7rem; }
.portrait-project strong { font-size:.9rem; }
.portrait-project .mini-network { font-size:2.4rem; color:#e9c774; }
.opening-footer { display:flex; justify-content:space-between; gap:1rem; border-top:1px solid #cfcec1; padding-top:1.15rem; padding-bottom:1.15rem; font-size:.74rem; color:#425659; }
.opening-footer a { color:var(--ink); }
.opening-footer a span { margin-left:1.5rem; }
.connections { padding:6rem 0; background:#fffdf9; }
.section-intro h2,.lab-heading h2 { font-size:clamp(2.4rem,4.2vw,3.7rem); letter-spacing:-.035em; line-height:1.08; margin:1rem 0 1.3rem; }
.section-intro>p:last-child { color:#425659; }
.connection-layout { display:grid; grid-template-columns:1.4fr 1fr; align-items:center; gap:3rem; margin-top:2rem; }
.connection-map { position:relative; min-height:340px; }
.connection-lines { position:absolute; width:100%; height:100%; inset:0; fill:none; stroke:#adbab3; stroke-width:1.2; }
.connection-flow { stroke:#ae422b; stroke-width:2; stroke-dasharray:8 800; animation:connection-travel 4s linear 1; }
.connection-node { position:absolute; display:flex; flex-direction:column; align-items:flex-start; background:#fffdf9; color:var(--ink); border:1px solid #a3b1a8; padding:1rem 1.2rem; border-radius:3px; min-width:185px; transition:transform .2s,border-color .2s,background .2s; }
.connection-node>span { display:flex; width:27px; height:27px; border:1px solid #82948b; border-radius:50%; align-items:center; justify-content:center; font-size:.7rem; margin-bottom:.5rem; }
.connection-node strong { font-size:1rem; }.connection-node small { font-size:.75rem; margin-top:.2rem; }
.connection-node:hover { transform:translateY(-4px); border-color:var(--rust); }
.connection-node[aria-expanded=true] { background:var(--ink); color:white; border-color:var(--ink); box-shadow:0 12px 25px #102c3214; }
.connection-node[aria-expanded=true]>span { border-color:#b7d2c1; }
.node-science { left:0; top:20px; }.node-design { right:0; top:90px; }.node-experience { left:22%; bottom:0; }
.connection-previews { border-left:2px solid #b45138; padding-left:2rem; min-height:260px; display:flex; align-items:center; flex-wrap:wrap; }
.connection-preview { padding:.8rem 0; }.connection-preview h3 { font-size:2rem; line-height:1.15; margin:.7rem 0 1rem; }.connection-preview p { color:#425659; }.connection-preview .text-link { display:inline-block; margin-top:1.2rem; }
.lab-feature { background:var(--ink); color:#fff9ee; padding:5rem 0; overflow:hidden; }
.lab-feature .eyebrow { color:#e9c774; }
.lab-heading { display:flex; justify-content:space-between; gap:2rem; align-items:end; margin-bottom:2.2rem; }
.lab-heading>p { padding-bottom:1.3rem; font-size:1.15rem; }.lab-heading>p span { color:#c1d2cd; font-size:.75rem; }
.lab-stage { border:1px solid #5a7777; background:#18383e; padding:2.2rem; position:relative; }
.lab-stage-heading { display:flex; justify-content:space-between; gap:1rem; text-transform:uppercase; letter-spacing:.13em; font-size:.65rem; color:#d4dfd6; }
.lab-diagram { width:100%; height:auto; display:block; margin:1rem auto; }
.lab-diagram text { font-family:var(--font-body); }
.lab-stage-caption { display:flex; justify-content:space-between; gap:2rem; border-top:1px solid #5a7777; padding-top:1rem; font-size:.75rem; color:#d4dfd6; }
.lab-stage-caption strong { color:#f2d48b; }
.lab-story { display:grid; grid-template-columns:1fr 1.35fr; gap:4rem; padding-top:2.5rem; }
.lab-story h3 { font-size:2.3rem; line-height:1.15; }.lab-story p { color:#d4dfd6; line-height:1.75; }.feature-links { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; margin-top:1.5rem; }.feature-links>a:not(.btn) { color:#f2d48b; border-bottom:1px solid; font-size:.85rem; }.lab-feature .btn-primary { background:#f1cc79; color:#102c32; }.lab-feature .btn-primary:hover { background:#ffe2a5; }
.editorial-work { padding:5rem 0; background:var(--paper); }
.work-row { display:grid; grid-template-columns:1fr 2.2fr .3fr; column-gap:1rem; padding:2.4rem 0; margin-top:1rem; border-top:1px solid #babeb0; color:var(--ink); align-items:start; transition:color .2s; }
.work-row:hover { color:var(--rust); }.work-index { font-size:.75rem; padding-top:.6rem; }.work-row h2 { font-size:clamp(2rem,4vw,3.5rem); line-height:1.08; letter-spacing:-.035em; }.work-arrow { font-size:2.4rem; }.work-row>p { grid-column:2; font-size:.9rem; margin-top:1rem; color:#425659; }
.entered { animation:section-enter .65s ease-out both; }
@keyframes section-enter { from { transform:translateY(22px); } to { transform:translateY(0); } }
@keyframes orbit-arrive { from { transform:rotate(-40deg) scale(.95); } to { transform:rotate(-24deg) scale(1); } }
@keyframes connection-travel { to { stroke-dashoffset:-808; } }
@media (max-width:1024px) { .opening-grid { gap:1.5rem; }.portrait-note { left:-.6rem; }.connection-layout { gap:1.5rem; }.connection-node { min-width:165px; padding:.8rem; } }
@media (max-width:768px) {
 .opening-grid { grid-template-columns:1fr; padding-top:2.5rem; padding-bottom:2.5rem; gap:3.5rem; }.opening h1 { font-size:clamp(3.6rem,14vw,5.5rem); }.opening-summary { font-size:1rem; }.opening .hero-cta { gap:1.2rem; }.opening-contact { font-size:.9rem; }.portrait-composition { width:min(100%,430px); justify-self:center; padding:.5rem 1rem 2rem; }.portrait-note { left:0; }.portrait-project { right:0; }.orbit-cross { right:.1rem; }.opening-footer { flex-direction:column; gap:.5rem; }.connections,.lab-feature,.editorial-work { padding:3rem 0; }.connection-layout { grid-template-columns:1fr; gap:2rem; }.connection-map { min-height:350px; }.connection-node { min-width:165px; }.node-design { top:130px; }.node-experience { left:4%; }.connection-previews { min-height:260px; padding-left:1.2rem; }.lab-heading { display:block; }.lab-heading>p { padding:0; }.lab-stage { padding:1rem .5rem; }.lab-stage-heading { padding:0 .5rem; font-size:.55rem; }.lab-stage-caption { flex-direction:column; gap:.5rem; margin:0 .5rem; }.lab-diagram { min-height:210px; }.lab-story { grid-template-columns:1fr; gap:1.2rem; }.work-row { grid-template-columns:1fr .2fr; }.work-index { grid-column:1/-1; margin-bottom:1rem; }.work-row>p { grid-column:1; }.lab-story h3 { font-size:2rem; }
}
@media (prefers-reduced-motion:reduce) { .visual-home *, .visual-home *::before,.visual-home *::after { animation:none!important; transition:none!important; } }
@media (max-width:768px) { .connection-map { min-height:420px; }.node-design { top:155px; }.editorial-portrait figcaption { max-width:130px; } }
.diagram-mobile-labels { display:none; }
@media (max-width:768px) { .diagram-mobile-labels { display:flex; justify-content:space-between; gap:1rem; font-size:.8rem; margin:1.5rem .5rem 0; color:#fff9ee; }.lab-diagram { min-height:145px; margin:.5rem 0; }.lab-diagram text { display:none; } }
@media (max-width:768px) { .portrait-note { width:145px; top:-.4rem; padding:.65rem; }.portrait-note p { font-size:.92rem; }.portrait-note span { font-size:.45rem; }.portrait-note svg { width:80px; height:18px; } }
@media (max-width:768px) { .portrait-note { width:170px; top:-1.7rem; }.portrait-note p { font-size:.78rem; line-height:1.2; }.portrait-note svg { display:none; }.editorial-portrait figcaption { max-width:85px; font-size:.7rem; } }

/* A teacher's sketch: the learner stays at the heart of every thread. */
.connections { background:#fffdf9; }
.connection-layout { grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:3rem; }
.teacher-map { min-height:500px; background-image:radial-gradient(#dddcd1 .7px,transparent .7px); background-size:22px 22px; }
.teacher-map .connection-lines { stroke:#8f9d8c; stroke-width:1.4; }
.teacher-map .connection-lines marker path { fill:none; stroke:#8f9d8c; }
.teacher-map .connection-flow { stroke:#b05036; animation:none; stroke-dasharray:none; }
.learner-center { position:absolute; top:41%; left:33%; width:34%; text-align:center; padding:.9rem 0; }
.learner-center span { display:block; font-size:.65rem; color:#596958; }
.learner-center strong { font-family:var(--font-heading); font-size:1.55rem; font-weight:400; }
.learner-center svg { position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:#ad4c32; stroke-width:1.5; overflow:visible; }
.teacher-map .connection-node { min-width:0; width:43%; border:0; padding:1rem .75rem; background:#fffdf9; box-shadow:none; border-radius:44% 47% 43% 48% / 12% 15% 11% 14%; }
.teacher-map .connection-node>span { display:block; width:auto; height:auto; border:0; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.45rem; color:#515a45; }
.teacher-map .connection-node strong { font-family:var(--font-heading); font-style:italic; font-weight:400; font-size:1.25rem; }
.teacher-map .connection-node small { font-size:.7rem; color:#52614f; }
.teacher-map .connection-node[aria-expanded=true] { background:#f2ead4; color:var(--ink); outline:1px solid #a8aa91; }
.teacher-map .connection-node:hover { background:#f6f0e2; transform:translateY(-2px); }
.teacher-map .node-science { top:3%; left:1%; }
.teacher-map .node-design { top:6%; right:0; }
.teacher-map .node-experience { top:56%; bottom:auto; left:auto; right:0; }
.teacher-map .node-reflect { bottom:0; left:29%; }
.teacher-map .node-share { top:54%; left:0; }
.connection-previews { min-height:360px; border-left:1px solid #c4b590; }
.connection-preview h3 { font-size:1.8rem; }
.teacher-note { display:block; font-family:var(--font-heading); font-style:italic; color:#8d422d!important; font-size:1.12rem; margin-top:1.2rem; }

/* Motion explains a command and response, then rests. */
.robot-arm { transform-origin:733px 257px; transition:transform 1.05s cubic-bezier(.4,0,.2,1); }
.lab-stage[data-direction=right] .robot-arm { transform:rotate(13deg); }
.lab-stage[data-direction=left] .robot-arm { transform:rotate(-12deg); }
.lab-stage[data-phase=sending] .lab-outgoing,.lab-stage[data-phase=observing] .lab-return { stroke:#fff9e5; stroke-width:4; stroke-dasharray:14 11; animation:lab-signal .65s linear 2; }
@keyframes lab-signal { to { stroke-dashoffset:-50; } }
.lab-controls { display:grid; grid-template-columns:auto 1fr; gap:1.5rem; align-items:center; border-top:1px solid #527171; padding:1.2rem 0 .6rem; }
.lab-command-buttons { display:flex; gap:.65rem; }
.lab-command-buttons button { font:inherit; font-size:.85rem; padding:.7rem 1rem; border:1px solid #b4c9bb; border-radius:3px; background:transparent; color:#fff9ee; cursor:pointer; transition:background .2s; }
.lab-command-buttons button:hover { background:#294d51; }
.lab-command-buttons button:disabled { opacity:.55; cursor:wait; }
#lab-status { font-size:.85rem; line-height:1.5; color:#e2e6d9; min-height:3em; }
.lab-demo-note { font-size:.65rem; color:#bfd0c7; margin:.65rem 0 1rem; line-height:1.5; }

/* An illustrated card collection, sharing the portfolio's ink and warm paper. */
.memory-studio { background:#f5f0e5; padding:5rem 0; border-top:1px solid #d8d1bf; }
.memory-heading { display:grid; grid-template-columns:1.2fr 1fr; gap:4rem; align-items:center; margin-bottom:2.5rem; }
.memory-heading h2 { font-size:clamp(2.3rem,4.2vw,3.5rem); line-height:1.08; letter-spacing:-.035em; margin:1rem 0; }
.memory-invitation p { font-size:.98rem; line-height:1.7; color:#425659; margin-bottom:.8rem; }
.memory-table { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:2.5rem; max-width:none; width:100%; margin:0; perspective:none; }
.memory-play { min-width:0; }
.memory-table .game-header { padding:.2rem 0 1rem; border-bottom:1px solid #c8c9b4; margin-bottom:1.1rem; }
.memory-table .game-prompt { color:#425659; font-size:.8rem; }
.memory-table .game-stats { gap:.8rem; color:#425659; font-size:.72rem; }
.memory-table .game-stats strong { color:#244d43; font-size:.9rem; }
.memory-table .card-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; perspective:1000px; }
.memory-table .memory-card { aspect-ratio:4/5; border-radius:7px; transition:transform .45s cubic-bezier(.2,.65,.3,1); }
.memory-table .card-face { border:1px solid #9ba88e; border-radius:7px; }
.memory-table .card-back { background:#173d3c; color:#ecd9a4; flex-direction:column; box-shadow:inset 0 0 0 5px #173d3c,inset 0 0 0 6px #6e8974; }
.memory-table .card-back svg { width:44%; height:auto; fill:none; stroke:#e2c77e; stroke-width:1; }
.card-corner { position:absolute; top:8px; left:10px; font-family:var(--font-heading); font-size:1rem; }
.card-edition { position:absolute; bottom:12px; font-size:.4rem; letter-spacing:.13em; }
.memory-table .card-front { background:#fffcf4; color:#96452f; flex-direction:column; gap:.65rem; }
.memory-table .card-front svg { width:40%; height:auto; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.memory-table .card-word { color:#25443c; font-size:.68rem; padding:0 .25rem; line-height:1.2; }
.memory-table .memory-card.matched { animation:none; }
.memory-table .memory-card.matched .card-front { background:#e9edda; border-color:#718b64; box-shadow:none; color:#4b7153; }
.memory-table .memory-card.matched .card-front::after { content:'✓'; position:absolute; top:6px; right:8px; color:#3a6043; font-size:.75rem; }
.memory-table .memory-card:hover:not(.flipped):not(.matched) .card-back { border-color:#ead092; box-shadow:inset 0 0 0 5px #173d3c,inset 0 0 0 6px #c8b982,0 4px 12px #203b3212; }
.memory-footer { display:flex; gap:1rem; justify-content:space-between; align-items:center; margin-top:1rem; }
.memory-footer p { font-size:.72rem; color:#526351; line-height:1.5; }
.memory-footer .btn { padding:.6rem .9rem; font-size:.75rem; color:#29483c; border-color:#8a9d84; flex-shrink:0; }
.memory-notebook { border-left:1px solid #c8c9b4; padding:1.3rem 0 1rem 2rem; align-self:stretch; }
.memory-notebook h3 { font-size:1.8rem; line-height:1.1; margin:.9rem 0 1rem; }
#memory-story-text { font-size:.95rem; line-height:1.7; color:#425659; min-height:6.5em; }
#memory-story-link { display:inline-block; margin:1rem 0 1.4rem; font-size:.85rem; }
.memory-collection { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; }
.memory-collection button { aspect-ratio:1; width:100%; border:1px solid #82967a; border-radius:50%; padding:9px; background:#fffaf0; color:#435f46; cursor:pointer; }
.memory-collection button:disabled { color:#8e9786; border-style:dashed; background:transparent; cursor:default; }
.memory-collection button[aria-pressed=true] { background:#e7d49b; border-color:#756d4c; }
.memory-collection svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2; }
.memory-progress-label { display:block; font-size:.65rem; color:#526351; margin:1.4rem 0 .5rem; }
#memory-progress { width:100%; height:4px; display:block; border:0; background:#d5dbc6; color:#59784c; accent-color:#59784c; }
#memory-progress::-webkit-progress-bar { background:#d5dbc6; } #memory-progress::-webkit-progress-value { background:#59784c; } #memory-progress::-moz-progress-bar { background:#59784c; }
.memory-notebook .fact-reveal { display:block; background:none; border:0; padding:0; margin-top:1rem; font-size:.8rem; color:#425659; min-height:4.5em; line-height:1.5; }
.all-discovered .memory-notebook { border-left-color:#6d8b5b; }
.memory-studio .journey-facts { max-width:none; margin:2rem 0 0; background:transparent; border:0; border-top:1px solid #c8c9b4; border-radius:0; font-size:.85rem; }
.memory-studio .journey-facts summary { padding:1rem 0; }
@media (max-width:1024px) { .connection-layout { gap:1.5rem; }.teacher-map .connection-node strong { font-size:1.05rem; }.memory-table { gap:1.5rem; }.memory-notebook { padding-left:1.4rem; }.memory-collection button { padding:6px; } }
@media (max-width:768px) {
 .connection-layout { grid-template-columns:minmax(0,1fr); }.teacher-map { min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:1rem .6rem; padding:1rem 0; }.teacher-map .connection-lines { display:none; }.learner-center { position:relative; top:auto; left:auto; width:190px; grid-column:1/-1; justify-self:center; margin-bottom:.7rem; padding:1.2rem 0; }.teacher-map .connection-node { position:relative; top:auto; bottom:auto; right:auto; left:auto; width:auto; padding:.8rem .55rem; }.teacher-map .connection-node strong { font-size:1rem; }.teacher-map .node-share { grid-column:1/-1; justify-self:center; width:65%; }.connection-previews { min-height:330px; }.connection-preview h3 { font-size:1.65rem; }
 .lab-controls { grid-template-columns:1fr; gap:.7rem; margin:0 .5rem; }.lab-command-buttons { justify-content:center; }.lab-command-buttons button { font-size:.8rem; padding:.6rem .85rem; }#lab-status { text-align:center; font-size:.77rem; }.lab-demo-note { margin:.5rem .5rem 1rem; font-size:.62rem; }
 .memory-studio { padding:3rem 0; }.memory-heading { grid-template-columns:1fr; gap:.7rem; margin-bottom:1.6rem; }.memory-heading h2 { font-size:2.5rem; }.memory-table { grid-template-columns:1fr; gap:1.7rem; }.memory-table .card-grid { gap:8px; }.memory-table .game-header { gap:.5rem; }.memory-table .game-prompt { font-size:.7rem; }.memory-table .game-stats { font-size:.65rem; gap:.6rem; }.card-corner { top:5px; left:7px; font-size:.8rem; }.card-edition { font-size:.28rem; bottom:9px; letter-spacing:.05em; }.memory-table .card-word { font-size:.54rem; }.memory-table .card-front { gap:.4rem; }.memory-footer { align-items:start; }.memory-footer p { font-size:.65rem; }.memory-notebook { border-left:0; border-top:1px solid #c8c9b4; padding:1.5rem 0 0; }.memory-notebook h3 { font-size:1.6rem; }#memory-story-text { min-height:0; }.memory-collection { max-width:350px; }.memory-collection button { padding:9px; }.memory-notebook .fact-reveal { min-height:3em; }
}
@media (prefers-reduced-motion:reduce) { .robot-arm { transition:none; }.lab-stage .lab-outgoing,.lab-stage .lab-return { animation:none; } }
@media (min-width:769px) { .teacher-map { min-height:560px; } } @media (min-width:769px) and (max-width:1100px) { .connection-layout { grid-template-columns:minmax(0,1fr); }.teacher-map { max-width:700px; width:100%; justify-self:center; }.connection-previews { min-height:0; } }