/* Hallmark · shape: illustrated classroom notebook · genre: editorial · theme: supplied C.W.C. character artwork · job: listen
 * hero: original illustrated cover · nav: author mast · footer: mast · signature: handwritten red underline · v2.0.0 */
/* Hallmark · pre-emit critique: keep the original drawing legible and the first episode one tap away. */
@import url("./tokens.css");
@import url("./base.css");
:root {
 --color-paper:#fbf8ed; --color-paper-2:#fffdf4; --color-ink:#222d34; --color-ink-2:#3b4344; --color-muted:#536361;
 --color-rule:#bfc7b9; --color-accent:#93252c; --color-accent-deep:#741b25; --color-focus:#83212a; --color-field:#dae6d7;
 --color-accent-ink:#fff9ee; --rule-soft:#dbe1d5; --sun:#f2d599; --blush:#efcec1; --soft-shadow:#3c514521;
 --font-display:"Kaiti TC","STKaiti","KaiTi","DFKai-SB","Noto Serif CJK TC","Songti TC",serif;
 --font-outlier:"Trebuchet MS","Arial Rounded MT Bold",sans-serif;
 --display-weight:700; --container:1190px; --gutter:clamp(20px,6vw,80px); --tracking-display:0;
}
html {scroll-padding-top:20px}
.wrap {width:min(calc(100% - var(--gutter) * 2),var(--container));margin-inline:auto}
a {text-decoration:none}
a:focus-visible,button:focus-visible {outline:3px solid var(--color-focus);outline-offset:4px}
.skip {position:absolute;z-index:5;top:-6rem;left:1rem;background:var(--color-paper);padding:var(--space-sm)}
.skip:focus {top:1rem}
.mast,.foot,.brand,.mast nav,.foot>div,.letter-inner,.sectionline,.filters {display:flex;align-items:center}
.mast,.foot,.letter-inner,.sectionline {justify-content:space-between}
.mast {min-height:78px;gap:20px}
.brand {gap:var(--space-xs);white-space:nowrap;align-items:center}
.avatar,.portrait span {display:block;background-image:url("cwc-classroom.jpg");background-size:306%;background-position:81% 25%;border-radius:50%}
.avatar {width:43px;height:43px;border:1px solid var(--color-rule)}
.monogram {font:700 24px var(--font-outlier);letter-spacing:-.065em;color:var(--color-accent)}
.brandname {font:700 18px var(--font-display);color:var(--color-accent)}
.mast nav,.foot>div {gap:clamp(var(--space-md),3vw,36px);font-size:15px}
.mast nav a,.foot a,.textlink,.alllink {display:inline-flex;align-items:center;min-height:44px}
.mast nav a:hover,.foot a:hover,.textlink:hover,.alllink:hover {text-decoration:underline;text-underline-offset:6px}
.subnav {gap:var(--space-xs);border:1px solid var(--color-accent);color:var(--color-accent);border-radius:24px;padding:0 var(--space-md)}
.hero {background:var(--color-field);border-block:1px solid var(--color-rule)}
.hero-inner {display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(var(--space-lg),4.5vw,72px);align-items:center;padding-block:clamp(44px,5.3vw,80px)}
h1 {position:relative;width:fit-content;font-size:clamp(64px,7.3vw,106px);line-height:1.09;letter-spacing:-.065em;color:var(--color-ink)}
h1::after,h2::after {content:"";display:block;width:66%;height:5px;background:var(--color-accent);border-radius:100% 8% 90% 5%;transform:rotate(-2deg);margin-top:var(--space-xs)}
.intro {font-size:clamp(16px,1.25vw,19px);line-height:1.85;margin:var(--space-lg) 0;color:var(--color-ink-2)}
.primary {display:inline-flex;align-items:center;gap:var(--space-sm);min-height:48px;padding:var(--space-sm) var(--space-lg);background:var(--color-accent);color:var(--color-accent-ink);border-radius:25px;font-weight:650}
.primary:hover {background:var(--color-accent-deep)}
.triangle {display:inline-block;border-block:5px solid transparent;border-left:8px solid currentColor}
.art {position:relative;isolation:isolate;margin:0;padding:clamp(var(--space-xs),.9vw,var(--space-sm));background:var(--color-paper-2);transform:rotate(1.2deg);border-radius:4px;box-shadow:2px 5px 0 var(--soft-shadow)}
.art::before {content:"";position:absolute;top:-11px;left:39%;width:22%;height:22px;background:var(--sun);opacity:.88;transform:rotate(-4deg);z-index:1;clip-path:polygon(2% 0,100% 2%,98% 99%,0 96%)}
.art img {width:100%;height:auto;display:block;border-radius:2px}
.listening {padding-block:clamp(44px,5vw,72px)}
h2 {font-size:clamp(30px,3vw,46px);line-height:1.35;width:fit-content}
h2::after {width:44px;height:3px}
.sectionline {gap:var(--space-md)}
.alllink,.textlink {gap:var(--space-xs);color:var(--color-accent);font-size:15px}
.filters {gap:var(--space-xs);margin:var(--space-lg) 0;flex-wrap:wrap}
.filters button {border:1px solid var(--color-rule);background:var(--color-paper-2);border-radius:24px;color:var(--color-ink);min-height:44px;padding:var(--space-xs) var(--space-md);font-size:15px;cursor:pointer}
.filters button[aria-pressed=true] {background:var(--color-ink);color:var(--color-paper-2);border-color:var(--color-ink)}
.filters button:hover {border-color:var(--color-accent)}
.episodes {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.episodes li {min-width:0;background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:4px 14px 5px 5px;box-shadow:2px 3px 0 var(--soft-shadow);position:relative}
.episodes li::before {content:"";display:block;margin-left:var(--space-lg);width:46px;height:6px;background:var(--color-field)}
.episodes li:nth-child(2)::before {background:var(--sun)}
.episodes li:nth-child(3)::before {background:var(--blush)}
.episodes a {display:flex;flex-direction:column;align-items:flex-start;height:calc(100% - 6px);padding:var(--space-lg);gap:var(--space-md)}
.episode-no {display:flex;justify-content:space-between;align-items:baseline;width:100%;font-size:15px;color:var(--color-accent);border-bottom:1px dashed var(--color-rule);padding-bottom:var(--space-sm)}
.episode-no small {font:600 13px var(--font-outlier);color:var(--color-muted)}
h3 {font-size:clamp(21px,1.9vw,28px);line-height:1.5}
.episodes p,.about p,.letter p {color:var(--color-ink-2);line-height:1.85;font-size:16px}
.episodes p {margin-top:var(--space-xs)}
.listen-icon {display:grid;place-items:center;margin-top:auto;width:39px;height:39px;border:1px solid var(--color-accent);color:var(--color-accent);border-radius:50%}
.episodes a:hover .listen-icon {background:var(--color-accent);color:var(--color-paper)}
.episodes a:hover h3 {text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.about {display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center;padding-block:clamp(44px,5vw,72px);border-top:1px dashed var(--color-rule)}
.portrait {display:grid;place-items:center}
.portrait span {width:min(78%,210px);aspect-ratio:1;border:6px solid var(--color-paper-2);box-shadow:0 0 0 1px var(--color-rule),4px 6px 0 var(--color-field)}
.about p {max-width:39em;margin:var(--space-md) 0}
.letter {background:var(--color-field);border-block:1px solid var(--color-rule)}
.letter-inner {gap:28px;padding-block:clamp(36px,4vw,60px)}
.letter p {margin-top:var(--space-md)}
.inverse {flex:none}
.foot {gap:var(--space-lg);padding-block:32px}
a:active,button:active {opacity:.83}
button:disabled {background:var(--color-paper);color:var(--color-muted);border-color:var(--color-rule);cursor:not-allowed}
@media(max-width:830px){
 .hero-inner{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--space-lg)}
 h1{font-size:clamp(58px,8.2vw,74px)}.intro br{display:none}
 .episodes{grid-template-columns:minmax(0,1fr)}
 .episodes a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-sm) var(--space-md)}
 .episode-no{grid-column:1/-1}.listen-icon{margin:0;align-self:center}
}
@media(max-width:640px){
 .mast{flex-wrap:wrap;gap:0;padding-top:var(--space-sm)}.mast .brand{margin-bottom:var(--space-xs)}.mast nav{width:100%;justify-content:space-between;border-top:1px solid var(--color-rule);font-size:14px}
 .subnav{border:0;padding:0}.brandname{font-size:17px}.avatar{width:36px;height:36px}
 .hero-inner{display:flex;flex-direction:column;align-items:stretch;gap:28px;padding-block:28px}
 .art{order:-1;width:min(100%,450px);align-self:center}
 h1{font-size:clamp(37px,9.3vw,58px);line-height:1.25}h1 br{display:none}h1::after{height:3px;width:52%}
 .intro{margin:var(--space-md) 0}.intro br{display:block}
 .about{grid-template-columns:minmax(0,1fr);gap:var(--space-lg)}.portrait{justify-items:start}.portrait span{width:98px}
 .letter-inner,.foot{align-items:flex-start;flex-direction:column}.foot{gap:var(--space-xs)}.foot>div{gap:var(--space-lg);flex-wrap:wrap}
 .episodes a{padding:var(--space-md)}.episodes p{font-size:15px}.filters button{padding:var(--space-xs) var(--space-sm)}
}