/* ═══════════════════════════════════════════════════════════════ BLOG POST STYLES Lifted verbatim from the first two posts so new ones look identical, but live in one file instead of being pasted into every article. The two original posts are untouched. ═══════════════════════════════════════════════════════════════ */ :root{--cream:#FFFCF0;--cream-soft:#FAF5E8;--ink:#22331C;--ink-deep:#172312;--ink-soft:rgba(34,51,28,.78);--teal:#33502E;--bronze:#B0872F;--bronze-deep:#6E5320;--border:rgba(34,51,28,.12);} *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{font-family:'Inter',sans-serif;font-weight:300;font-size:18px;line-height:1.8;background:var(--cream);color:var(--ink-soft);-webkit-font-smoothing:antialiased;} nav{padding:20px 28px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);background:rgba(255,252,240,.92);backdrop-filter:blur(12px);position:sticky;top:0;z-index:10;} nav .logo img{height:38px;width:auto;display:block;} nav .nav-cta{background:linear-gradient(180deg,#E4BE5C 0%,#B0872F 58%,#8B6A20 100%);color:#160E02;} .article-hero{position:relative;overflow:hidden;padding:76px 28px 60px;background:radial-gradient(ellipse at top right,rgba(51,80,46,.45),transparent 60%),linear-gradient(158deg,#22331C 0%,#172312 100%);} .article-hero::after{content:'';position:absolute;right:-50px;bottom:-40px;width:280px;height:280px;background:url('/dandelion.png') no-repeat center/contain;opacity:.13;pointer-events:none;} .article-hero-inner{max-width:720px;margin:0 auto;position:relative;z-index:1;} .article-hero .eyebrow{color:#EBD9A8;} .article-hero h1{color:#FFFCF0;margin-bottom:14px;} .article-hero .meta{color:rgba(255,252,240,.72);border:none;padding:0;margin:0;} .wrap{max-width:720px;margin:0 auto;padding:56px 28px 40px;} .eyebrow{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze);font-weight:600;margin-bottom:18px;} h1{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(2.2rem,5.5vw,3.4rem);line-height:1.12;color:var(--ink-deep);margin-bottom:22px;letter-spacing:-.01em;} .meta{font-size:.86rem;color:rgba(34,51,28,.55);margin-bottom:40px;padding-bottom:32px;border-bottom:1px solid var(--border);} article p{margin-bottom:24px;} article h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(1.6rem,4vw,2.1rem);color:var(--ink-deep);margin:48px 0 18px;line-height:1.2;} article h3{font-family:'Inter',sans-serif;font-weight:600;font-size:1.2rem;color:var(--ink);margin:34px 0 12px;} article strong{color:var(--ink);font-weight:600;} article em{color:var(--bronze-deep);font-style:italic;} article a{color:var(--teal);text-decoration:underline;text-underline-offset:3px;} article ul{margin:0 0 24px 22px;} article li{margin-bottom:10px;} .pull{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1.4rem,3.5vw,1.8rem);color:var(--teal);line-height:1.4;margin:40px 0;padding-left:24px;border-left:3px solid var(--bronze);} .cta-box{background:var(--ink-deep);color:var(--cream);border-radius:16px;padding:40px 32px;margin:56px 0 24px;text-align:center;} .cta-box h3{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.7rem;color:var(--cream);margin-bottom:12px;} .cta-box p{color:rgba(255,252,240,.82);margin-bottom:24px;font-size:1rem;} .cta-box a{display:inline-block;background:var(--bronze);color:#fff;padding:15px 34px;border-radius:999px;text-decoration:none;font-weight:500;letter-spacing:.04em;font-size:.9rem;} .author{display:flex;gap:18px;align-items:center;margin:48px 0;padding:28px;background:var(--cream-soft);border-radius:14px;} .author img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex-shrink:0;} .author p{margin:0;font-size:.95rem;line-height:1.6;} .author strong{display:block;font-family:'Cormorant Garamond',serif;font-size:1.2rem;color:var(--ink-deep);margin-bottom:2px;font-weight:600;} .related{max-width:720px;margin:0 auto;padding:0 28px 60px;} .related a{color:var(--teal);font-weight:500;text-decoration:none;} .share-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:40px 0 8px;padding:24px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);} .share-row .lbl{font-size:.84rem;font-weight:600;color:var(--ink);margin-right:4px;} .share-row a,.share-row button{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:var(--cream-soft);border:1px solid var(--border);color:var(--ink);cursor:pointer;text-decoration:none;transition:all .2s;font:inherit;} .share-row a:hover,.share-row button:hover{background:var(--teal);color:#fff;transform:translateY(-2px);} .share-row svg{width:18px;height:18px;} .comments{max-width:720px;margin:8px auto 0;padding:40px 28px 56px;} .comments h3{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.7rem;color:var(--ink-deep);margin-bottom:20px;} footer{background:var(--ink-deep);color:rgba(255,252,240,.7);text-align:center;padding:40px 28px;font-size:.85rem;} footer a{color:rgba(255,252,240,.7);margin:0 8px;text-decoration:none;} /* uwa-dropdown-stack: nav must create a stacking context or the More menu opens behind the hero. relative (not sticky) keeps the header unfrozen. */ nav,.uwa-nav,.ts-nav{position:relative !important;top:auto !important;z-index:1000 !important;} .uwa-more{position:relative !important;z-index:1001 !important;} .uwa-more-menu{z-index:1002 !important;} /* uwa-nav-normalise: one geometry for every nav variant on the site — logo hard left, links immediately after it, CTA hard right, 50px gutters. */ @media(min-width:901px){ nav#nav > .container,.top-strip,.uwa-nav-in,body > nav:not(#nav):not(.ts-nav){ display:flex !important;align-items:center !important; width:100% !important;max-width:1440px !important; margin:0 auto !important;padding:0 50px !important; box-sizing:border-box !important;gap:0 !important; justify-content:flex-start !important; } .nav-logo-img,.ts-logo,.uwa-nav-logo,body > nav > .logo{ display:inline-flex !important;flex-direction:row !important;align-items:center !important; gap:12px !important;flex:0 0 auto !important;margin:0 !important; } .nav-logo-img img,.ts-logo img,.uwa-nav-logo img,body > nav > .logo img{ height:44px !important;width:auto !important; } .nav-links,.ts-nav,.uwa-nav-links{ display:flex !important;align-items:center !important;gap:26px !important; margin:0 0 0 36px !important;flex:1 1 auto !important; justify-content:flex-start !important; } .nav-cta,.ts-cta,.uwa-nav-cta{margin-left:auto !important;flex:0 0 auto !important;} } /* uwa-nav-normalise2: force one geometry — some bars carried their own max-width (1340) which added a second 50px inset on top of the gutter. */ @media(min-width:901px){ html body nav#nav > .container,html body .top-strip,html body .uwa-nav-in, html body > nav:not(#nav):not(.ts-nav){ max-width:none !important;width:100% !important; padding:0 50px !important;margin:0 !important; display:flex !important;align-items:center !important; justify-content:flex-start !important;gap:0 !important;box-sizing:border-box !important; } html body .nav-links,html body .ts-nav,html body .uwa-nav-links{ margin:0 0 0 36px !important;flex:1 1 auto !important; justify-content:flex-start !important;gap:26px !important; display:flex !important;align-items:center !important; } html body .nav-cta,html body .ts-cta,html body .uwa-nav-cta{ margin-left:auto !important;margin-right:0 !important;flex:0 0 auto !important; } } /* uwa-nav-normalise3: outer