:root{--ink:#11110f;--paper:#e8e5da;--white:#f7f6f0;--red:#ff3b22;--blue:#1764ff;--yellow:#ffd62e;--line:#8b887f}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit}.mood-head{height:76px;padding:14px 2vw;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;align-items:start;position:sticky;top:0;background:rgba(232,229,218,.94);backdrop-filter:blur(8px);z-index:5}.brand{font-size:10px;line-height:1.1;font-weight:800;text-decoration:none}.mood-nav{display:flex;gap:26px;font-size:9px;letter-spacing:.08em;text-transform:uppercase}.mood-nav a{text-decoration:none}.mood-nav a[aria-current=page]{border-bottom:1px solid}.mood-intro{padding:5vw 2vw 8vw;display:grid;grid-template-columns:1.4fr .6fr;gap:8vw}.mood-intro h1{font-size:clamp(5rem,12vw,13rem);line-height:.72;letter-spacing:-.085em;margin:0}.mood-intro h1 em{font-family:Georgia,serif;font-weight:400}.intro-copy{align-self:end}.intro-copy p{font-size:18px;line-height:1.25;max-width:430px}.tiny{font-size:8px!important;text-transform:uppercase;letter-spacing:.1em}.mood-index{border-top:1px solid var(--line)}.index-row{display:grid;grid-template-columns:60px 1.4fr 1fr auto;gap:4vw;align-items:center;padding:22px 2vw;border-bottom:1px solid var(--line);text-decoration:none;transition:background .18s,color .18s}.index-row:hover{background:var(--ink);color:var(--white)}.index-row strong{font-size:clamp(2rem,5vw,5.8rem);letter-spacing:-.06em}.index-row p{max-width:390px;font-size:13px}.index-row span{font-size:9px;letter-spacing:.08em}.mood-hero{padding:4vw 2vw 5vw;display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:end}.mood-hero h1{font-size:clamp(5rem,11vw,12rem);line-height:.75;letter-spacing:-.08em;margin:0}.mood-hero p{max-width:500px;font-size:18px;line-height:1.25}.board{padding:0 2vw 10vw;columns:4 260px;column-gap:12px}.card{break-inside:avoid;margin:0 0 28px;position:relative}.card img{display:block;width:100%;height:auto;filter:saturate(.84);border:1px solid var(--ink)}.card figcaption{padding-top:8px;display:grid;grid-template-columns:28px 1fr;gap:7px;font-size:8px;line-height:1.25;text-transform:uppercase;letter-spacing:.06em}.card:nth-child(3n+1){margin-top:5vw}.card:nth-child(4n){transform:rotate(.7deg)}.card:nth-child(5n){transform:rotate(-.6deg)}.mark{position:absolute;display:block;z-index:2;mix-blend-mode:multiply;pointer-events:none}.mark.red{background:var(--red);width:9px;height:34%;right:14%;top:19%;transform:rotate(-7deg)}.mark.blue{background:var(--blue);width:52%;height:8px;left:9%;top:52%;transform:rotate(8deg)}.mark.yellow{background:var(--yellow);width:38%;height:17%;right:8%;bottom:18%;transform:rotate(-4deg)}.mood-footer{background:var(--ink);color:var(--white);padding:30px 2vw;display:flex;justify-content:space-between;font-size:9px;text-transform:uppercase;letter-spacing:.08em}.mood-footer a{text-decoration:none}
.use-panel{margin:0 2vw 7vw;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);display:grid;grid-template-columns:1fr 3fr}.use-panel h2{margin:0;padding:18px 0;font-size:10px;letter-spacing:.08em;text-transform:uppercase}.use-steps{display:grid;grid-template-columns:repeat(3,1fr)}.use-steps div{padding:18px;border-left:1px solid var(--line)}.use-steps span{font-size:8px;letter-spacing:.08em}.use-steps strong{display:block;font-size:18px;margin:28px 0 8px}.use-steps p{font-size:12px;line-height:1.35;margin:0}.lesson{margin:7px 0 0 35px;font-size:11px;line-height:1.35}.lesson strong{font-size:8px;text-transform:uppercase;letter-spacing:.07em}
@media(max-width:700px){.mood-head{height:auto;min-height:65px}.mood-nav{gap:11px;flex-wrap:wrap;justify-content:flex-end;max-width:260px}.mood-intro{grid-template-columns:1fr;padding:14vw 4vw}.mood-intro h1{font-size:24vw}.intro-copy{margin-top:10vw}.index-row{grid-template-columns:32px 1fr auto;padding:20px 4vw}.index-row p{display:none}.index-row strong{font-size:10vw}.mood-hero{grid-template-columns:1fr;padding:14vw 4vw 12vw}.mood-hero h1{font-size:22vw}.use-panel{margin:0 4vw 14vw;grid-template-columns:1fr}.use-steps{grid-template-columns:1fr}.use-steps div{border-left:0;border-top:1px solid var(--line)}.use-steps strong{margin:10px 0 6px}.board{columns:1;padding:0 4vw 18vw}.card{margin-bottom:42px!important;transform:none!important}.card figcaption{grid-template-columns:24px 1fr;font-size:7px}.lesson{margin-left:31px;font-size:13px}.mood-footer{padding:25px 4vw}}
