@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display&display=swap');
:root{--cream:#fbf7ed;--ink:#162d31;--teal:#07546b;--soft:#e2eff0;--gold:#f4d982}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font:17px/1.65 'DM Sans',Arial,sans-serif}a{color:var(--teal)}.wrap{max-width:1120px;margin:auto;padding:0 24px}.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;background:white;padding:10px;z-index:9}header{border-bottom:1px solid #d6dfda;background:#fffcf6}.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:84px}.brand{font-weight:800;font-size:1.25rem;line-height:1.1;text-decoration:none;letter-spacing:-.04em}.brand span{display:block;color:var(--teal)}nav{display:flex;gap:22px;flex-wrap:wrap}nav a{text-decoration:none;font-weight:600;font-size:.92rem}nav a[aria-current=page]{text-decoration:underline;text-underline-offset:6px}.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center;padding:75px 0 85px}.eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:.8rem;font-weight:800;color:var(--teal)}h1,h2,h3{line-height:1.14;letter-spacing:-.035em}h1{font-size:clamp(2.8rem,6vw,5.3rem);margin:14px 0 20px}h2{font-size:clamp(2rem,4vw,3.1rem);margin:0 0 20px}h3{font-size:1.3rem;margin:0 0 10px}.lead{font-size:1.22rem;line-height:1.6}.btn{display:inline-block;padding:13px 22px;background:var(--teal);color:white;border-radius:8px;text-decoration:none;font-weight:700;margin:10px 10px 0 0}.btn.secondary{background:transparent;border:2px solid var(--teal);color:var(--teal)}.cover{width:100%;height:auto;aspect-ratio:2/3;max-width:390px;display:block;margin:auto;box-shadow:14px 18px 0 #c9dbd9,0 16px 35px #243a3b22;border-radius:3px}.section{padding:75px 0}.tint{background:#e8f1ee}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.panel{background:#fffdf7;padding:28px;border:1px solid #dbe3dd;border-radius:12px}.panel p{margin-bottom:0}.intro{max-width:760px}.banner{background:var(--teal);color:white;padding:65px 0}.banner h2{color:white}.banner a{color:white}.page-head{padding:70px 0 30px;max-width:850px}.page-head h1{font-size:clamp(2.6rem,5vw,4.2rem)}.content{max-width:800px;padding-bottom:80px}.content p{margin:0 0 20px}footer{border-top:1px solid #d6dfda;padding:30px 0;font-size:.9rem}.footer-inner{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}.note{font-size:.87rem;color:#4e6262}.pill{display:inline-block;background:var(--gold);padding:3px 12px;border-radius:99px;font-size:.8rem;font-weight:800}@media(max-width:760px){.nav{align-items:flex-start;flex-direction:column;padding:20px 0}nav{gap:12px 18px}.hero{grid-template-columns:1fr;gap:45px;padding:45px 0 65px}.hero .cover{max-width:300px}.grid{grid-template-columns:1fr}.section{padding:50px 0}}
.resource-content{max-width:850px;padding-bottom:85px}.resource-section{padding:28px 0;border-top:1px solid #d5dfdb}.resource-section h2{font-size:clamp(1.6rem,3vw,2.2rem)}.checklist{list-style:none;margin:20px 0;padding:0}.checklist li{position:relative;padding:7px 0 7px 35px}.checklist li:before{content:"";position:absolute;left:2px;top:15px;width:17px;height:17px;border:2px solid var(--teal);border-radius:3px}.resource-tip{background:#e8f1ee;border-left:4px solid var(--teal);padding:15px 20px;border-radius:0 6px 6px 0}.resource-content p{max-width:75ch}

/* v0.6 editorial article system */
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:55px;padding-bottom:80px;align-items:start}.article-body{max-width:75ch}.article-body p{margin:0 0 1.3em}.article-body section{padding-top:12px}.article-body h2{font-size:clamp(1.65rem,3vw,2.15rem);margin:1.5em 0 .55em}.article-questions{padding-left:24px}.article-questions li{padding:0 0 12px 7px}.article-aside{position:sticky;top:28px}.article-aside img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid #d5dfdb}.article-next{background:#e8f1ee;border-left:5px solid var(--teal);padding:25px;margin:36px 0}.article-next h2{margin-top:0}.article-feature{display:grid;grid-template-columns:230px 1fr;align-items:center;gap:36px;max-width:850px}.article-feature img{width:100%;height:300px;object-fit:cover;object-position:center 25%;border-radius:12px}.article-feature h2{font-size:clamp(1.8rem,3vw,2.5rem)}@media(max-width:800px){.article-layout{grid-template-columns:1fr}.article-aside{position:static;grid-row:1;max-width:260px}.article-feature{grid-template-columns:1fr}.article-feature img{max-width:240px;height:240px}}

.book-promo{display:flex;align-items:center;gap:22px;margin:42px 0;padding:22px;border:1px solid #cbdcd8;background:#fffdf7;border-radius:12px}.book-promo img{width:100px;height:150px;object-fit:contain;flex-shrink:0}.book-promo h3{margin:6px 0}.book-promo p{margin:6px 0 10px;font-size:.93rem}.book-promo a{font-weight:700}@media(max-width:480px){.book-promo{align-items:flex-start;gap:15px;padding:14px}.book-promo img{width:72px;height:108px}}

/* v0.9 editorial art and native share links */
.article-hero-image{margin:0 0 28px}.article-hero-image img{width:100%;height:auto;display:block;border:1px solid #d5dfdb;border-radius:12px}.share-strip{border-top:1px solid #d5dfdb;padding:24px 0;margin:35px 0}.share-strip h2{font-size:1.3rem;margin:0 0 4px}.share-links{display:flex;flex-wrap:wrap;gap:10px}.share-links a,.share-links button{font:600 .9rem 'DM Sans',Arial,sans-serif;border:1px solid #07546b;border-radius:7px;padding:8px 13px;background:transparent;color:#07546b;text-decoration:none;cursor:pointer}.share-links a:hover,.share-links button:hover{background:#e2eff0}a:focus-visible,button:focus-visible{outline:3px solid #07546b;outline-offset:3px}@media(max-width:600px){.article-hero-image{margin-bottom:20px}}

/* v1.0.1: compact, accessible mobile navigation and editorial layout */
.nav-toggle{display:none}
.article-layout:has(> .article-body:only-child){grid-template-columns:minmax(0,1fr);max-width:850px}
.article-layout:has(> .article-body:only-child) .article-body{max-width:100%}
@media(max-width:760px){
  .wrap{padding-left:20px;padding-right:20px}
  .nav{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;min-height:72px;padding-top:14px;padding-bottom:14px}
  .nav-toggle{display:flex;align-items:center;gap:9px;padding:10px 12px;border:2px solid var(--teal);border-radius:8px;background:transparent;color:var(--teal);font:700 0.9rem 'DM Sans',Arial,sans-serif;cursor:pointer}
  .nav-toggle-bars{width:20px;height:16px;display:inline-block;background:linear-gradient(to bottom,var(--teal) 0 2px,transparent 2px 7px,var(--teal) 7px 9px,transparent 9px 14px,var(--teal) 14px 16px)}
  .nav nav{grid-column:1/-1;display:none;flex-direction:column;gap:0;width:100%;border-top:1px solid #d6dfda;padding-top:8px}
  .nav nav.is-open{display:flex}
  .nav nav a{display:block;padding:11px 5px;font-size:1rem}
  .hero{padding-top:38px;gap:35px}
  .hero h1{font-size:clamp(2.45rem,8vw,4rem)}
  .page-head{padding-top:42px}
  .page-head h1{font-size:clamp(2.3rem,7vw,3.5rem)}
  .article-layout{gap:20px}
  .article-layout:has(> .article-body:only-child){grid-template-columns:1fr}
}
@media(max-width:390px){.wrap{padding-left:16px;padding-right:16px}.hero h1{font-size:2.35rem}.btn{padding:11px 15px}}
@media(min-width:761px){.nav nav{display:flex!important}}

/* v1.0.2: retain comfortable gutters and stack two-column layouts before they crowd */
html,body{max-width:100%;overflow-x:clip}
.wrap{width:100%;min-width:0}
.hero > *, .article-layout > *, .grid > *{min-width:0}
@media (min-width:761px) and (max-width:1050px){
 .hero{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:36px}
 .hero h1{font-size:clamp(2.6rem,5vw,4.2rem)}
 .cover{max-width:min(100%,340px)}
 .nav nav{gap:12px}
 .nav nav a{font-size:.85rem}
}
@media (max-width:900px){
 .hero{grid-template-columns:minmax(0,1fr);gap:36px}
 .hero .cover{max-width:300px}
 .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .article-layout{grid-template-columns:minmax(0,1fr)}
 .article-aside{position:static;max-width:300px}
}
@media (max-width:760px){.grid{grid-template-columns:minmax(0,1fr)}}

/* v1.0.3: keep horizontal gutters on elements that are both .wrap and .page-head/.hero.
   Earlier shorthand padding declarations had reset the .wrap left/right padding to zero. */
.wrap.page-head, .wrap.hero { padding-left:24px; padding-right:24px; }
@media (max-width:760px) {
  .wrap.page-head, .wrap.hero { padding-left:20px; padding-right:20px; }
}
@media (max-width:390px) {
  .wrap.page-head, .wrap.hero { padding-left:16px; padding-right:16px; }
}

/* v1.0.3 follow-up: .section padding shorthand also erased .wrap gutters. */
.wrap.section{padding-left:24px;padding-right:24px}
/* Nested article panels already sit inside the outer .wrap. */
.wrap.section > .wrap.section{width:100%;max-width:none;padding-left:0;padding-right:0}
@media(max-width:760px){.wrap.section{padding-left:20px;padding-right:20px}.wrap.section > .wrap.section{padding-left:0;padding-right:0}}
@media(max-width:390px){.wrap.section{padding-left:16px;padding-right:16px}.wrap.section > .wrap.section{padding-left:0;padding-right:0}}

/* Observations v0.2: responsive illustration and editorial card */
.observations-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));gap:28px;align-items:start}
.observation-card{display:block;min-width:0;max-width:660px;overflow:hidden;border:1px solid #d5dfdb;border-radius:12px;background:#fffdf7;color:inherit;text-decoration:none}
.observation-card:hover h2{text-decoration:underline}
.observation-card__image{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center 38%}
.observation-card__body{padding:22px}
.observation-card__body h2{font-size:clamp(1.4rem,2.5vw,1.9rem);line-height:1.2;overflow-wrap:break-word;margin:8px 0 12px}
.observation-card__body p{margin:0 0 14px}
.observation-card__body .text-link{font-weight:700;color:var(--teal)}
@media(max-width:760px){.observations-list{grid-template-columns:minmax(0,1fr)}.observation-card__body{padding:18px}}

/* Observations v0.3: intentional desktop feature layout, consistent left edge */
.observations-intro{padding-bottom:16px}
.observations-intro > p{max-width:760px}
.observations-section{padding-top:24px}
.observations-list{grid-template-columns:minmax(0,1fr)}
.observation-card--featured{max-width:none;width:100%;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:stretch}
.observation-card--featured .observation-card__image{width:100%;height:100%;min-height:350px;max-height:480px;aspect-ratio:auto;object-fit:contain;object-position:center;background:#fff}
.observation-card--featured .observation-card__body{display:flex;flex-direction:column;justify-content:center;padding:clamp(22px,3.5vw,48px)}
.observation-card--featured .observation-card__body h2{font-size:clamp(1.55rem,2.4vw,2.35rem)}
.observation-card--featured .observation-card__body .text-link{margin-top:8px}
@media(max-width:760px){
 .observation-card--featured{display:block}
 .observation-card--featured .observation-card__image{height:auto;min-height:0;max-height:none;aspect-ratio:3/2;object-fit:contain}
 .observation-card--featured .observation-card__body{display:block;padding:18px}
}

/* Observations v0.4 — separate editorial hero and genuine card thumbnail */
.observations-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,60px);align-items:center;padding-top:54px;padding-bottom:28px}
.observations-hero__copy{min-width:0;max-width:600px}
.observations-hero__copy h1{font-size:clamp(2.8rem,5vw,4.6rem);line-height:1.05;margin:15px 0 24px}
.observations-hero__copy .lead{font-size:clamp(1.15rem,1.65vw,1.45rem)}
.observations-hero__visual{min-width:0;overflow:hidden;border-radius:10px}
.observations-hero__visual img{display:block;width:100%;height:auto;max-height:410px;object-fit:contain}
.observations-feature{padding-top:20px;padding-bottom:78px}
.observation-feature-card{display:grid;grid-template-columns:minmax(0,42%) minmax(0,58%);align-items:center;overflow:hidden;border:1px solid #d5dfdb;border-radius:14px;background:#fffdf7;color:inherit;text-decoration:none}
.observation-feature-card__thumb{display:block;width:100%;height:100%;min-height:220px;max-height:340px;object-fit:cover;object-position:center}
.observation-feature-card__copy{padding:clamp(22px,3.5vw,45px);min-width:0}
.observation-feature-card__copy h2{font-size:clamp(1.55rem,2.7vw,2.45rem);line-height:1.18;margin:12px 0 16px}
.observation-feature-card__copy p{margin:0 0 22px}
.observation-feature-card__copy .text-link{color:var(--teal);font-weight:700}
.observation-feature-card:hover h2{text-decoration:underline}
@media(max-width:900px){.observations-hero{grid-template-columns:minmax(0,1fr);gap:24px;padding-top:36px}.observations-hero__visual{max-width:680px}.observations-hero__visual img{max-height:340px}.observation-feature-card{grid-template-columns:minmax(0,1fr)}.observation-feature-card__thumb{height:auto;min-height:0;max-height:280px;object-fit:cover}.observations-feature{padding-bottom:54px}}
@media(max-width:760px){.observations-hero,.observations-feature{padding-left:20px;padding-right:20px}.observations-hero__copy h1{font-size:clamp(2.4rem,8vw,3.4rem)}.observation-feature-card__thumb{max-height:230px}.observation-feature-card__copy{padding:20px}}
@media(max-width:390px){.observations-hero,.observations-feature{padding-left:16px;padding-right:16px}}

/* Multiple featured Observations */
.observations-feature{display:grid;gap:1.5rem;padding-bottom:2rem}

/* v1.1: consolidated Resources catalogue and compact follow-on content */
.resources-listing{padding-top:16px;padding-bottom:54px}
.resources-grid{align-items:stretch}
.resource-card{display:flex;flex-direction:column;gap:10px;min-width:0}
.resource-card__title{font-size:1.35rem;line-height:1.3;margin:0}
.resource-card p{margin:0}
.resource-card__action{margin-top:auto!important;padding-top:12px}
.resources-note{margin:20px 0 0}
.resources-context{border-top:1px solid #d6dfda;margin-top:30px;padding-top:28px}
.resources-context h2{font-size:clamp(1.65rem,3vw,2.3rem);margin:0 0 10px}
.resources-context p{margin:0}
@media (min-width:761px) and (max-width:1000px){.resources-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.resources-listing{padding-top:10px;padding-bottom:40px}.resources-context{margin-top:24px;padding-top:22px}}

/* v1.2 Resources: one aligned content system, no duplicate featured resource */
.resources-page-head{max-width:1120px;padding-top:56px;padding-bottom:26px;}
.resources-page-head .lead{max-width:760px;}
.resources-listing{padding-top:8px;padding-bottom:58px;}
.resources-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.resource-card{padding:clamp(20px,2.3vw,28px);}
.resource-card__title{font-size:clamp(1.15rem,1.55vw,1.35rem);overflow-wrap:break-word;}
@media(max-width:950px){.resources-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:620px){.resources-grid{grid-template-columns:minmax(0,1fr);}.resources-page-head{padding-top:38px;padding-bottom:18px;}.resources-listing{padding-top:4px;}}
