/* Field Notes — the Manzanita editorial collection. Scoped to new pages. */
.notes-page { background:#fff; color:#01173e; }
.notes-wrap { width:min(1232px,90%); margin-inline:auto; }
.notes-kicker { color:#65502f; font:500 13px/1.65 var(--sans); letter-spacing:.09em; text-transform:uppercase; }
.notes-masthead { padding-top:158px; padding-bottom:52px; display:grid; grid-template-columns:1.1fr .9fr; column-gap:80px; align-items:end; }
.notes-masthead .notes-kicker { grid-column:1/-1; margin-bottom:18px; }
.notes-masthead h1 { font:400 clamp(48px,5.6vw,76px)/1.1 var(--serif); letter-spacing:-.035em; }
.notes-masthead h1 em { color:#82673c; }
.notes-deck { max-width:42ch; color:#354153; font-size:17px; line-height:1.85; }
.notes-landscape { margin:0 auto; position:relative; }
.notes-landscape img { display:block; width:100%; height:clamp(240px,29vw,400px); object-fit:cover; object-position:center 57%; }
.notes-landscape figcaption { margin-top:14px; color:#65502f; font-size:13px; line-height:1.7; letter-spacing:.025em; }
.notes-editorial { display:grid; grid-template-columns:.7fr 1.3fr; gap:90px; padding-block:70px 74px; border-bottom:1px solid #d2c3aa; }
.notes-editorial h2 { font:400 clamp(30px,3vw,42px)/1.22 var(--serif); max-width:18ch; }
.notes-editorial p { max-width:62ch; color:#354153; font-size:17px; line-height:1.9; }
.notes-list { padding-bottom:80px; }
.note-row { display:grid; grid-template-columns:70px 1.2fr 1fr; gap:28px 44px; align-items:start; padding-block:42px; border-bottom:1px solid #ded4c4; }
.note-number { font:400 28px/1.35 var(--serif); color:#82673c; }
.note-row .notes-kicker { margin-bottom:10px; }
.note-row h2 { font:400 clamp(29px,2.7vw,37px)/1.25 var(--serif); text-wrap:balance; }
.note-row h2 a { text-decoration:none; text-underline-offset:6px; text-decoration-thickness:1px; }
.note-row h2 a:hover,.note-row h2 a:focus-visible { text-decoration:underline; }
.note-row-copy { color:#354153; font-size:16px; line-height:1.85; }
.note-row-copy p { margin-bottom:16px; max-width:46ch; }
.note-read { color:#01173e; text-decoration:underline; text-underline-offset:5px; font-size:14px; line-height:1.8; }
.notes-invitation { background:#f4f0e8; padding:64px 0; }
.notes-invitation .notes-wrap { display:grid; grid-template-columns:1fr auto; gap:30px 70px; align-items:center; }
.notes-invitation h2 { font:400 clamp(29px,3vw,40px)/1.25 var(--serif); max-width:26ch; margin-top:12px; }
.notes-invitation p:not(.notes-kicker) { color:#354153; font-size:16px; line-height:1.85; margin-top:18px; max-width:64ch; }
.note-breadcrumb { display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:14px; line-height:1.8; color:#65502f; margin-bottom:32px; }
.note-breadcrumb a { color:#01173e; text-decoration-thickness:1px; text-underline-offset:4px; }
.note-article-header { padding-top:142px; padding-bottom:45px; border-bottom:1px solid #d2c3aa; }
.note-article-header h1 { font:400 clamp(38px,4.3vw,60px)/1.16 var(--serif); letter-spacing:-.025em; max-width:23ch; margin:16px 0 24px; text-wrap:balance; }
.note-article-header .notes-deck { max-width:65ch; }
.note-meta { margin-top:27px; display:flex; flex-wrap:wrap; gap:8px 24px; color:#65502f; font-size:13px; line-height:1.8; }
.note-reading { display:grid; grid-template-columns:240px minmax(0,1fr); gap:80px; padding-block:52px 80px; align-items:start; }
.note-contents { position:sticky; top:128px; border-top:2px solid #b49b70; padding-top:18px; }
.note-contents h2 { font:500 13px/1.7 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:#65502f; margin-bottom:16px; }
.note-contents ol { padding-left:20px; display:grid; gap:12px; color:#65502f; font-size:14px; line-height:1.65; }
.note-contents a { color:#354153; text-decoration:none; }
.note-contents a:hover,.note-contents a:focus-visible { text-decoration:underline; text-underline-offset:4px; }
.note-body { width:100%; max-width:70ch; min-width:0; }
.note-body section { scroll-margin-top:128px; }
.note-body section+section { margin-top:42px; }
.note-body h2 { font:400 clamp(27px,2.7vw,35px)/1.3 var(--serif); color:#01173e; margin-bottom:18px; text-wrap:balance; }
.note-body p { color:#354153; font-size:17px; line-height:1.95; margin-bottom:20px; text-wrap:pretty; }
.note-takeaway { margin-top:45px; background:#01173e; color:#fff; padding:32px 36px; }
.note-takeaway h2 { color:#fff; font-size:29px; margin-bottom:20px; }
.note-takeaway ul { list-style:none; padding:0; }
.note-takeaway li { font-size:16px; line-height:1.85; padding:14px 0; border-top:1px solid #ffffff38; }
.note-takeaway li:first-child { padding-top:0; border:0; }
.note-related { border-top:1px solid #d2c3aa; padding-block:40px 70px; display:grid; grid-template-columns:1fr auto; gap:20px 50px; align-items:center; }
.note-related h2 { font:400 31px/1.3 var(--serif); margin-top:10px; }
.note-related h2 a { text-decoration:none; }
.note-related h2 a:hover { text-decoration:underline; text-underline-offset:5px; }
.notes-page .nav-links a[aria-current] { box-shadow:none; }
@media(min-width:1600px) { .notes-wrap { width:1232px; } }
@media(max-width:1000px) { .notes-masthead { gap:20px 40px; } .notes-editorial { gap:45px; } .note-row { grid-template-columns:44px 1fr 1fr; gap:25px; } .note-reading { grid-template-columns:195px minmax(0,1fr); gap:40px; } }
@media(max-width:760px) { .notes-masthead { grid-template-columns:1fr; padding-top:134px; padding-bottom:34px; gap:0; } .notes-masthead .notes-deck { margin-top:22px; max-width:50ch; } .notes-editorial { grid-template-columns:1fr; gap:25px; padding-block:42px; } .notes-editorial h2 { max-width:24ch; } .note-row { grid-template-columns:35px minmax(0,1fr); gap:10px 19px; padding-block:32px; } .note-row-copy { grid-column:2; } .notes-invitation .notes-wrap { grid-template-columns:1fr; } .notes-invitation .btn-outline { justify-self:start; } .note-reading { grid-template-columns:1fr; gap:38px; padding-top:30px; } .note-contents { position:static; max-width:none; } .note-contents ol { display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; } .note-article-header { padding-top:126px; padding-bottom:30px; } .note-related { grid-template-columns:1fr; } .note-related>a { justify-self:start; } }
@media(max-width:480px) { .notes-wrap { width:calc(100% - 50px); } .notes-masthead h1 { font-size:49px; } .notes-masthead .notes-deck,.notes-editorial p,.note-body p { font-size:16px; line-height:1.9; } .notes-landscape img { height:230px; } .notes-list { padding-bottom:50px; } .notes-invitation { padding-block:46px; } .note-contents ol { grid-template-columns:1fr; } .note-article-header h1 { font-size:38px; } .note-takeaway { padding:26px 24px; } .note-breadcrumb { margin-bottom:25px; } }

/* Revision18: genuine project photographs and sourced company perspective. */
.note-related h2 a { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px; }
.note-related h2 a:hover,.note-related h2 a:focus-visible { color:#72572f; }
.note-project-image { margin:38px auto 0; }
.note-photo-stage { display:flex; justify-content:center; align-items:center; height:clamp(290px,42vw,560px); padding:18px; background:#f5f1e9; }
.note-photo-stage img { display:block; width:100%; height:100%; object-fit:contain; filter:none!important; }
.note-project-image figcaption,.note-inline-figure figcaption { margin-top:13px; font-size:14px; line-height:1.8; color:#65502f; }
.note-inline-figure { margin:32px 0 38px; }
.note-inline-figure .note-photo-stage { height:auto; padding:0; }
.note-inline-figure img { width:100%; height:auto; max-height:600px; object-fit:contain; }
.note-voice { margin-top:42px; padding:28px 32px; background:#f5f1e9; border-top:2px solid #b49b70; }
.note-body .note-voice h2 { font:500 13px/1.7 var(--sans); color:#65502f; letter-spacing:.08em; text-transform:uppercase; margin-bottom:18px; }
.note-body .note-voice p { font-size:16px; line-height:1.9; }
.note-voice p:last-child { margin-bottom:0; }
.note-body blockquote { margin:24px 0 28px; padding:3px 0 3px 25px; border-left:2px solid #b49b70; }
.note-body blockquote p { font:400 clamp(23px,2.3vw,29px)/1.6 var(--serif); color:#01173e; margin-bottom:14px; text-wrap:pretty; }
.note-body blockquote cite { font:400 13px/1.7 var(--sans); color:#65502f; font-style:normal; }
.note-links { margin-top:20px; }
@media(max-width:760px) { .note-photo-stage { height:360px; padding:14px; } .note-voice { padding:25px; } }
@media(max-width:480px) { .note-project-image { margin-top:28px; } .note-photo-stage { height:290px; padding:12px; } .note-inline-figure .note-photo-stage { height:auto; padding:0; } .note-body blockquote { padding-left:19px; } .note-voice { padding:24px 22px; } }