/* Design notes: the same creative world, with a calmer reading rhythm. */
.design-notes{padding-top:100px;padding-bottom:100px;border-top:1px solid var(--line)}
.notes-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:35px;margin-bottom:38px}
.notes-section-head h2,.portfolio-questions h2{font-size:clamp(38px,5vw,70px);line-height:1.02;letter-spacing:-.055em;margin:15px 0 0}
.notes-section-head h2 em,.portfolio-questions h2 em,.notes-hero h1 em,.notes-footer p em{font-family:MiloSerif,Georgia,serif;font-weight:400}
.notes-section-head>p{max-width:400px;line-height:1.7;font-size:16px;margin:0}
.note-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.note-card{min-width:0}.note-card>a{display:block;color:var(--ink);text-decoration:none}
.note-card-image{aspect-ratio:1.4;overflow:hidden;position:relative;background:#e4e1d7;border:1px solid #20211f1a;border-radius:8px}
.note-card-image img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease)}
.note-card:first-child .note-card-image{background:var(--lime)}
.note-card-image>span{position:absolute;right:14px;bottom:14px;width:40px;height:40px;border-radius:50%;background:var(--cream);display:grid;place-items:center;font-size:23px}
.note-card .eyebrow{display:block;margin:23px 0 13px;font-size:10px;letter-spacing:.08em;line-height:1.6}
.note-card h3{font-size:clamp(22px,2.3vw,32px);line-height:1.15;letter-spacing:-.04em;margin:0 0 15px;max-width:430px}
.note-card p{font-size:15px;line-height:1.7;margin:0 0 20px;max-width:430px}
.note-read,.project-reading{font-size:13px;font-weight:700;text-underline-offset:5px}
.note-card>a:hover .note-card-image img{transform:scale(1.035)}
.notes-all{display:inline-block;margin-top:35px;min-height:44px}
.project-reading{display:inline-block;margin-top:15px;min-height:30px;color:var(--blue)}
.portfolio-questions{display:grid;grid-template-columns:.7fr 1fr;gap:10%;padding-top:40px;padding-bottom:100px}
.questions-list details{border-top:1px solid var(--line);padding:21px 0}.questions-list details:last-child{border-bottom:1px solid var(--line)}
.questions-list summary{font-size:18px;font-weight:700;cursor:pointer;line-height:1.5;min-height:28px}
.questions-list p{font-size:16px;line-height:1.8;margin:16px 0 0;max-width:650px}.questions-list a{color:var(--blue);text-underline-offset:3px}
.footer-journal{font-size:13px;font-weight:700;min-height:44px;display:flex;align-items:center}
.journal-page{background:var(--cream)}
.notes-header{display:flex;justify-content:space-between;align-items:center;gap:25px;min-height:100px;border-bottom:1px solid var(--line)}
.notes-header nav{display:flex;align-items:center;flex-wrap:wrap;gap:28px}.notes-header nav a{font-size:14px;font-weight:700;min-height:44px;display:flex;align-items:center;text-decoration:none}
.notes-header nav a[aria-current]{color:var(--blue)}
.notes-hero{position:relative;padding-top:90px;padding-bottom:80px}
.notes-hero h1{font-size:clamp(56px,9.5vw,136px);line-height:.96;letter-spacing:-.07em;margin:30px 0}
.notes-hero>p{max-width:640px;font-size:21px;line-height:1.65}
.notes-handwritten{position:absolute;right:9%;bottom:25%;font:italic 24px/1.2 MiloSerif,Georgia,serif;transform:rotate(-8deg);color:var(--blue)}
.notes-list{padding-top:45px;padding-bottom:100px}.notes-list .notes-section-head{border-top:1px solid var(--line);padding-top:40px}
.notes-editorial-note{margin-top:90px;max-width:780px;padding:35px;border-left:5px solid var(--blue);background:#eeebe2}
.notes-editorial-note h2{font-size:30px;letter-spacing:-.04em;margin-top:0}.notes-editorial-note p{line-height:1.8}.notes-editorial-note a{color:var(--blue);font-weight:700;display:inline-block;padding:10px 0}
.notes-footer{background:var(--ink);color:var(--cream);padding-top:65px;padding-bottom:35px;display:grid;grid-template-columns:1fr auto;gap:40px}
.notes-footer p{font-size:clamp(35px,5vw,65px);line-height:1.05;letter-spacing:-.04em;margin:25px 0 30px}.notes-footer .button{background:var(--lime);color:var(--ink)}
.notes-footer nav{display:flex;flex-direction:column;gap:20px;font-size:16px}.notes-footer nav a{padding:5px 0}.notes-footer small{grid-column:1/-1;max-width:800px;color:#f5f2e9b3;font-size:12px;line-height:1.7}
.notes-credit{display:block;width:180px;background:var(--cream);padding:13px!important;border-radius:5px}.notes-credit img{width:100%;height:auto}
.notes-breadcrumbs{display:flex;gap:12px;align-items:center;font-size:13px;margin-bottom:40px}.notes-breadcrumbs a{padding-block:8px}
.article-header{padding-top:35px;padding-bottom:35px}.article-header>h1{max-width:1050px;font-size:clamp(42px,6.4vw,87px);line-height:1.04;letter-spacing:-.06em;margin:24px 0}
.article-deck{font-size:clamp(18px,2vw,24px);line-height:1.65;max-width:850px}.article-byline{display:flex;flex-wrap:wrap;gap:12px 27px;margin:30px 0 0;font-size:13px}.article-byline a{font-weight:700;text-underline-offset:4px}
.article-hero{margin:20px auto 70px}.article-hero img{width:100%;max-height:650px;object-fit:cover;aspect-ratio:2;display:block;border-radius:8px;background:var(--lime)}
.article-hero figcaption{font-size:12px;margin-top:14px;line-height:1.7}
.article-layout{display:grid;grid-template-columns:minmax(150px,260px) minmax(0,740px);justify-content:space-between;gap:7%;padding-bottom:90px;max-width:1400px}
.article-index nav{display:flex;flex-direction:column;gap:18px;margin-top:25px}.article-index a{font-size:13px;line-height:1.6;text-decoration:none}.article-index a:hover{color:var(--blue)}
.article-body section{scroll-margin-top:30px;margin-bottom:44px}.article-body h2{font-size:clamp(27px,3vw,38px);line-height:1.2;letter-spacing:-.04em;margin:0 0 22px}
.article-body p{font-size:18px;line-height:1.85;margin:0 0 20px}.article-takeaway{background:var(--lime);padding:30px;border-radius:7px;margin-top:45px}.article-takeaway p{font-size:22px;line-height:1.5;margin:16px 0 0;letter-spacing:-.025em}
.article-example{margin-top:32px;max-width:100%;white-space:normal;text-align:left}.article-body .article-disclosure{font-size:13px;line-height:1.8;color:#20211fa8;margin-top:28px}.article-disclosure a{text-underline-offset:3px}
.article-related{border-top:1px solid var(--line);padding-top:60px;padding-bottom:85px}.article-related>h2{font-size:42px;letter-spacing:-.05em;margin:0 0 35px}
.journal-page :focus-visible,.design-notes :focus-visible,.portfolio-questions :focus-visible{outline:3px solid var(--blue);outline-offset:5px}
@media(max-width:1050px){.notes-handwritten{position:static;display:inline-block;margin-top:20px}.note-grid{gap:20px}.article-layout{gap:5%;grid-template-columns:200px minmax(0,1fr)}}
@media(max-width:760px){.notes-section-head{display:block}.notes-section-head>p{margin-top:25px}.note-grid{grid-template-columns:1fr;gap:42px}.note-card h3{font-size:29px}.note-card p{max-width:none}.note-card-image{aspect-ratio:1.65}.note-card .eyebrow{margin-top:18px}.design-notes{padding-block:65px}.portfolio-questions{grid-template-columns:1fr;gap:35px;padding-bottom:65px}.notes-header{align-items:flex-start;padding-block:20px;gap:15px}.notes-header .logo{font-size:32px}.notes-header nav{gap:5px 18px;justify-content:flex-end;max-width:300px}.notes-header nav a{font-size:12px;min-height:36px}.notes-header nav a:last-child{width:100%;justify-content:flex-end}.notes-hero{padding-top:55px;padding-bottom:45px}.notes-hero>p{font-size:18px}.notes-hero .eyebrow,.article-header>.eyebrow{font-size:10px}.notes-list{padding-top:0;padding-bottom:60px}.notes-editorial-note{margin-top:55px;padding:25px}.notes-editorial-note h2{font-size:26px}.notes-footer{grid-template-columns:1fr;padding-top:45px;gap:35px}.notes-footer nav{font-size:14px;gap:14px}.notes-footer small{grid-column:auto}.article-header{padding-top:20px}.notes-breadcrumbs{margin-bottom:25px}.article-header>h1{font-size:clamp(38px,8vw,60px)}.article-deck{font-size:18px}.article-byline{font-size:12px;gap:10px 18px}.article-hero{margin-bottom:40px}.article-hero img{aspect-ratio:1.4}.article-layout{grid-template-columns:1fr;gap:40px;padding-bottom:50px}.article-index{border-bottom:1px solid var(--line);padding-bottom:28px}.article-index nav{gap:13px;margin-top:18px}.article-body p{font-size:17px;line-height:1.85}.article-body h2{font-size:29px}.article-takeaway{padding:25px}.article-takeaway p{font-size:21px}.article-related{padding-block:45px}.article-related>h2{font-size:35px}}
@media(prefers-reduced-motion:reduce){.note-card-image img{transition:none}.note-card>a:hover .note-card-image img{transform:none}}