/* Original regional motifs, adapted from Minnan red-brick architecture.
   Decorative CSS backgrounds carry no learning content or pointer targets. */
:root{--minnan-brick:#9f4d3f;--minnan-sand:#b99a65;--minnan-paper:#fcf7ee}
.topbar{position:relative;border-bottom-color:#8d634d}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;pointer-events:none;background:#b99a65 url("./ornaments/brick-lattice.svg") repeat-x center/25px 25px;opacity:.72}
.brand-symbol{border-color:#ad8165;background:#382d32;color:#f2d6aa}
.curriculum-hero{position:relative;isolation:isolate;overflow:hidden;padding-right:330px;background:linear-gradient(115deg,#fffaf2 0%,#fbf6ec 60%,#f3f6f3 100%);border-color:#e5d6bc}
.curriculum-hero::after{content:"";position:absolute;z-index:0;right:25px;top:50%;width:280px;height:200px;transform:translateY(-50%);background:url("./ornaments/yantailed-roof.svg") no-repeat center/contain;pointer-events:none;opacity:.9}
.curriculum-hero::before{content:"";position:absolute;z-index:0;left:0;right:0;bottom:0;height:25px;background:url("./ornaments/sea-wave.svg") repeat-x bottom/320px 30px;opacity:.34;pointer-events:none}
.curriculum-hero>*{position:relative;z-index:1}
.curriculum-hero>.eyebrow{color:#8c4b3d}
.curriculum-hero .curriculum-flow{gap:7px}
.curriculum-flow span{border:1px solid #e6d8c1;background:#fffdf8}
.curriculum-unit{position:relative;isolation:isolate;overflow:hidden;border-color:#e3dbc9;border-top:3px solid #b17057}
.curriculum-unit::after{content:"";position:absolute;right:10px;bottom:10px;width:64px;height:64px;background:url("./ornaments/brick-lattice.svg") no-repeat center/contain;pointer-events:none;opacity:.13;z-index:0}
.curriculum-unit>*{position:relative;z-index:1}
.curriculum-unit>.eyebrow{color:#976450}
.curriculum-unit .unit-result{background:#faf5ec}
.lesson-head,.exp-heading{position:relative;padding-bottom:19px}
.lesson-head::after,.exp-heading::after{content:"";position:absolute;left:0;bottom:0;width:156px;height:14px;background:url("./ornaments/sea-wave.svg") no-repeat center/156px 15px;opacity:.7;pointer-events:none}
.lesson-purpose{position:relative;isolation:isolate;overflow:hidden;border-left-color:#9f4d3f}
.lesson-purpose::after{content:"";position:absolute;right:13px;top:13px;width:56px;height:56px;background:url("./ornaments/brick-lattice.svg") no-repeat center/contain;opacity:.12;pointer-events:none;z-index:0}
.lesson-purpose>*{position:relative;z-index:1}
.lesson-purpose>.eyebrow{color:#8c5546}
.course-project{border-top:3px solid #b99a65}
.sidebar-bottom{position:relative;padding-top:24px}
.sidebar-bottom::before{content:"";position:absolute;left:0;right:0;top:3px;height:13px;background:url("./ornaments/sea-wave.svg") repeat-x center/160px 15px;opacity:.7;pointer-events:none}
.course-reference{border-top:1px solid #e5dccb;padding-top:8px}
@media(max-width:1100px) and (min-width:851px){.curriculum-hero{padding-right:245px}.curriculum-hero::after{width:215px;height:175px;right:15px}}
@media(max-width:850px){.curriculum-hero{padding-right:22px;padding-bottom:150px}.curriculum-hero::after{top:auto;right:25px;bottom:28px;width:190px;height:115px;transform:none;opacity:.82}}
@media(max-width:700px){.curriculum-hero{padding:20px 19px 136px}.curriculum-hero::after{right:18px;bottom:24px;width:170px;height:105px}.curriculum-hero .curriculum-flow{font-size:13px;gap:6px}.curriculum-unit::after{width:48px;height:48px;right:8px;bottom:8px}.lesson-purpose::after{width:45px;height:45px;right:8px;top:8px}.lesson-head::after,.exp-heading::after{width:126px;height:12px;background-size:126px 12px}}
@media print{.topbar::after,.curriculum-hero::before,.curriculum-hero::after,.curriculum-unit::after,.lesson-head::after,.exp-heading::after,.lesson-purpose::after,.sidebar-bottom::before{display:none!important}.curriculum-hero{padding:20px;background:#fff}.curriculum-unit{break-inside:avoid}}

/* Course scenes: large collage on the map, modest topic cues in learning workspaces. */
.curriculum-hero{padding-right:442px;min-height:365px}
.curriculum-hero::after{right:18px;width:410px;height:327px;background-image:url("./ornaments/course-stories.svg");opacity:1}
.curriculum-unit::before{content:"";position:absolute;z-index:0;right:32px;top:52px;width:228px;height:168px;pointer-events:none;background-repeat:no-repeat;background-position:center;background-size:contain}
.curriculum-unit h2{padding-right:268px;min-height:190px;display:flex;align-items:center}
.lesson-head{min-height:288px}
.lesson-head>div{flex:1;min-width:0;padding-right:342px}
.lesson-head .eyebrow{width:calc(100% + 242px)}
.lesson-head>.status-pill{position:absolute;right:0;top:0}
.lesson-head::before,.exp-heading::before{content:"";position:absolute;right:32px;top:44px;width:294px;height:216px;pointer-events:none;background:var(--topic-scene) no-repeat center/contain}
.exp-heading{padding-right:342px;min-height:288px}.exp-heading>.eyebrow{width:calc(100% + 342px)}
.exp-heading::before{top:44px}
.curriculum-unit:nth-child(1)::before{background-image:url("./ornaments/scenes/lesson-01.svg")}
.curriculum-unit:nth-child(2)::before{background-image:url("./ornaments/scenes/lesson-04.svg")}
.curriculum-unit:nth-child(3)::before{background-image:url("./ornaments/scenes/lesson-09.svg")}
.curriculum-unit:nth-child(4)::before{background-image:url("./ornaments/scenes/lesson-12.svg")}
#main[data-lesson="1"] .lesson-head{--topic-scene:url("./ornaments/scenes/lesson-01.svg")}
#main[data-lesson="2"] .lesson-head{--topic-scene:url("./ornaments/scenes/lesson-02.svg")}
#main[data-lesson="3"] .lesson-head{--topic-scene:url("./ornaments/scenes/lesson-03.svg")}
#main[data-lesson="4"] .lesson-head{--topic-scene:url("./ornaments/scenes/lesson-04.svg")}
#main[data-lesson="5"] .lesson-head{--topic-scene:url("./ornaments/scenes/lesson-05.svg")}
#main[data-lesson="6"] .lesson-head{--topic-scene:url("./ornaments/scenes/lesson-06.svg")}
#main[data-lesson="7"] .lesson-head{--topic-scene:url("./ornaments/scenes/lesson-07.svg")}
#main[data-lesson="8"] .lesson-head{--topic-scene:url("./ornaments/scenes/lesson-08.svg")}
#main[data-lesson="9"] .lesson-head{--topic-scene:url("./ornaments/scenes/lesson-09.svg")}
#main[data-lesson="10"] .lesson-head{--topic-scene:url("./ornaments/scenes/lesson-10.svg")}
#main[data-lesson="11"] .lesson-head{--topic-scene:url("./ornaments/scenes/lesson-11.svg")}
#main[data-lesson="12"] .lesson-head{--topic-scene:url("./ornaments/scenes/lesson-12.svg")}
#experiment-workspace[data-lab-id="attention"] .exp-heading{--topic-scene:url("./ornaments/scenes/lab-attention.svg")}
#experiment-workspace[data-lab-id="binary"] .exp-heading{--topic-scene:url("./ornaments/scenes/lab-binary.svg")}
#experiment-workspace[data-lab-id="bitwise"] .exp-heading{--topic-scene:url("./ornaments/scenes/lab-bitwise.svg")}
#experiment-workspace[data-lab-id="files"] .exp-heading{--topic-scene:url("./ornaments/scenes/lab-files.svg")}
#experiment-workspace[data-lab-id="memory"] .exp-heading{--topic-scene:url("./ornaments/scenes/lab-memory.svg")}
#experiment-workspace[data-lab-id="sampling"] .exp-heading{--topic-scene:url("./ornaments/scenes/lab-sampling.svg")}
#experiment-workspace[data-lab-id="stored-program"] .exp-heading{--topic-scene:url("./ornaments/scenes/lab-stored-program.svg")}
#experiment-workspace[data-lab-id="tokens"] .exp-heading{--topic-scene:url("./ornaments/scenes/lab-tokens.svg")}
#experiment-workspace[data-lab-id="utf8"] .exp-heading{--topic-scene:url("./ornaments/scenes/lab-utf8.svg")}
@media(max-width:1250px){.curriculum-hero{padding:28px 28px 276px;min-height:0}.curriculum-hero::after{top:auto;right:24px;bottom:23px;width:330px;height:262px;transform:none}}
@media(max-width:1200px){.curriculum-units{grid-template-columns:1fr}}
@media(max-width:700px){.curriculum-hero{padding:20px 19px 248px}.curriculum-hero::after{right:12px;bottom:16px;width:min(320px,calc(100% - 24px));height:236px}.curriculum-unit::before{right:32px;top:52px;width:198px;height:147px}.curriculum-unit h2{padding-right:140px;min-height:118px}.lesson-head{min-height:168px}.lesson-head>div{padding-right:164px}.lesson-head .eyebrow{width:calc(100% + 64px)}.lesson-head::before,.exp-heading::before{width:228px;height:168px;right:32px;top:32px}.exp-heading{padding-right:164px;min-height:170px}.exp-heading>.eyebrow{width:calc(100% + 164px)}.exp-heading::before{top:40px}}
@media print{.curriculum-hero{padding:20px;min-height:0}.lesson-head,.exp-heading{min-height:0}.curriculum-unit::before,.lesson-head::before,.exp-heading::before{display:none!important}.curriculum-unit h2,.lesson-head>div,.exp-heading{padding-right:0;min-height:0}.lesson-head .eyebrow,.exp-heading>.eyebrow{width:auto}.lesson-head>.status-pill{position:static}}

/* Another 50% in each dimension, with a leftward inset and dedicated text space. */
@media(max-width:950px){
 .lesson-head{display:block;min-height:0}
 .lesson-head>div,.exp-heading{padding-right:0;min-height:0}
 .lesson-head .eyebrow,.exp-heading>.eyebrow{width:auto}
 .lesson-head>.status-pill{position:static;display:inline-block;margin-top:12px}
 .lesson-head::before,.exp-heading::before{position:static;display:block;margin:0 0 16px;right:auto;top:auto}
 .curriculum-unit::before{position:static;display:block;margin:0 0 12px;right:auto;top:auto}
 .curriculum-unit h2{padding-right:0;min-height:0;display:block}
}
@media print{.curriculum-unit::before,.lesson-head::before,.exp-heading::before{display:none!important}.lesson-head,.exp-heading,.curriculum-unit h2{min-height:0}.lesson-head>div,.exp-heading,.curriculum-unit h2{padding-right:0}.lesson-head .eyebrow,.exp-heading>.eyebrow{width:auto}.lesson-head>.status-pill{position:static}}

/* Flowing sea ribbons; append after the existing regional motif rules. */
.lesson-head,.exp-heading{padding-bottom:40px}
.lesson-head::after,.exp-heading::after{
  width:min(620px,100%);
  height:28px;
  left:0;
  bottom:0;
  background:url("./ornaments/sea-ribbon.svg") no-repeat left center/auto 100%;
  opacity:.9;
  pointer-events:none;
}
@media(max-width:700px){
  .lesson-head,.exp-heading{padding-bottom:38px}
  .lesson-head::after,.exp-heading::after{
    width:100%;
    height:24px;
    background-size:auto 100%;
  }
}
@media print{
  .lesson-head,.exp-heading{padding-bottom:0}
  .lesson-head::after,.exp-heading::after{display:none!important}
}