/* ============================================================
   itSMF NZ — website chrome & shared patterns
   Link AFTER styles.css. Baked-in look: citrus accent, serif
   headings, default texture, soft corners.
   ============================================================ */
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-sans);background:var(--surface);color:var(--text-body);-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3,h4{margin:0}
img{max-width:100%}

.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.wrap-narrow{max-width:var(--container-narrow);margin:0 auto;padding:0 var(--gutter)}

/* ---- Eyebrow ---- */
.eyebrow{display:inline-flex;align-items:center;gap:.7em;font-family:var(--font-mono);font-size:.78rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}
.eyebrow i{width:1.75rem;height:2px;border-radius:2px;background:var(--indigo-400);display:inline-block;flex:none}
.eyebrow.dark{color:var(--text-on-dark-muted)} .eyebrow.dark i{background:var(--citrus)}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:1rem;padding:.78rem 1.4rem;border-radius:var(--r-pill);border:1.5px solid transparent;box-shadow:var(--shadow-sm);cursor:pointer;text-decoration:none;transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur),background var(--dur)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-accent{background:var(--citrus);color:#222a00}
.btn-primary{background:var(--indigo-700);color:#fff}
.btn-outline{background:transparent;border-color:rgba(255,255,255,.4);color:#fff;box-shadow:none}
.btn-outline-ink{background:transparent;border-color:var(--indigo-200);color:var(--indigo-700);box-shadow:none}
.btn-sm{font-size:.92rem;padding:.5rem 1rem}

/* ---- Nav ---- */
header.nav{position:sticky;top:0;z-index:20;background:rgba(246,247,251,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.brand .koru{width:38px;aspect-ratio:91.3/68.2;background:var(--koru) center/contain no-repeat;flex:none}
.brand b{font-family:var(--font-display);font-size:1.35rem;font-weight:600;color:var(--text-strong);letter-spacing:-.01em;text-transform:none;line-height:1}
.brand small{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);display:block;margin-top:1px}
nav.links{display:flex;align-items:center;gap:2rem}
nav.links a{font-size:.95rem;font-weight:500;color:var(--text-body);text-decoration:none;transition:color var(--dur);position:relative}
nav.links a:hover{color:var(--indigo-700)}
nav.links a.active{color:var(--indigo-700)}
nav.links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-26px;height:2px;background:var(--citrus-deep);border-radius:2px}

/* ---- Section base ---- */
section{position:relative}
.pad{padding:var(--sp-9) 0}
.pad-sm{padding:var(--sp-8) 0}
.sec-head{max-width:62ch}
.sec-head h2{font-family:var(--font-display);font-weight:500;font-size:var(--fs-h2);line-height:1.15;letter-spacing:-.01em;color:var(--text-strong);margin:1rem 0 0}
.sec-head .lead{font-size:var(--fs-lead);line-height:1.5;color:var(--text-body);margin:1rem 0 0;max-width:60ch}
.mono{font-family:var(--font-mono);font-size:.72rem;color:var(--text-muted);letter-spacing:.02em}

/* ---- Interior page header (compact indigo hero) ---- */
.page-hero{position:relative;overflow:hidden;background:var(--indigo-700);color:#fff}
.page-hero .inner{position:relative;z-index:2;padding-block:var(--sp-8) var(--sp-8);max-width:64ch}
.page-hero h1{font-family:var(--font-display);font-weight:500;font-size:clamp(2.25rem,1.6rem+2.2vw,3.1rem);line-height:1.08;letter-spacing:-.02em;margin:1rem 0 0}
.page-hero h1 em{font-style:italic;color:var(--citrus);font-weight:400}
.page-hero .lead{font-size:var(--fs-lead);line-height:1.5;color:var(--text-on-dark);margin:1.3rem 0 0;max-width:52ch}
.page-hero .koru-big{position:absolute;right:-150px;top:-130px;width:560px;aspect-ratio:91.3/68.2;background:var(--koru-white) center/contain no-repeat;opacity:.07;z-index:1}

/* ---- Tags / chips ---- */
.tag{font-family:var(--font-mono);font-size:.72rem;font-weight:500;padding:.24em .65em;border-radius:var(--r-pill);white-space:nowrap}
.t-topic{background:#fff;color:var(--indigo-700);border:1px solid var(--border)}
.t-solid{background:var(--indigo-700);color:#fff}
.t-inperson{background:rgba(46,125,91,.12);color:#2E7D5B;border:1px solid rgba(46,125,91,.25)}
.t-online{background:var(--indigo-50);color:var(--indigo-600);border:1px solid var(--indigo-100)}
.t-hybrid{background:rgba(217,138,33,.14);color:var(--gold-deep);border:1px solid rgba(217,138,33,.3)}

/* ---- Date badge ---- */
.badge{text-align:center;background:var(--indigo-700);color:#fff;border-radius:var(--r-md);padding:.7rem 1rem;min-width:4.4rem;box-shadow:var(--shadow-ink)}
.badge .d{font-family:var(--font-display);font-size:2rem;font-weight:600;line-height:1}
.badge .m{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;margin-top:.25rem;color:var(--citrus)}

/* ---- Event card (feed) ---- */
.feed{display:flex;flex-direction:column;gap:var(--sp-4)}
.event{display:grid;grid-template-columns:auto 1fr auto;gap:var(--sp-5);align-items:center;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--shadow-sm);transition:transform var(--dur) var(--ease-out),box-shadow var(--dur)}
.event:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.ev-meta{display:flex;align-items:center;gap:.6rem;margin-bottom:.45rem;flex-wrap:wrap}
.event h3{font-family:var(--font-display);font-size:1.3rem;font-weight:500;color:var(--text-strong);letter-spacing:-.01em;margin-bottom:.25rem}
.event p{margin:0;font-size:1rem;line-height:1.5;color:var(--text-body);max-width:58ch}
.event .speaker{font-family:var(--font-mono);font-size:.74rem;color:var(--text-muted);margin-top:.5rem}

/* ---- Footer CTA band ---- */
.band{position:relative;overflow:hidden;background:var(--indigo-900);color:#fff}
.band-inner{position:relative;z-index:2;text-align:center;padding-block:var(--sp-10)}
.band h2{font-family:var(--font-display);font-weight:500;font-size:var(--fs-h1);line-height:1.1;letter-spacing:-.01em;margin:1rem auto 0;max-width:18ch}
.band p{color:var(--text-on-dark);max-width:46ch;margin:1.2rem auto 0;font-size:1.0625rem;line-height:1.55}
.band .cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}
.band .koru-big{position:absolute;left:-140px;bottom:-160px;width:560px;aspect-ratio:91.3/68.2;background:var(--koru-citrus) center/contain no-repeat;opacity:.08;z-index:1}

/* ---- Footer ---- */
footer.foot{background:var(--indigo-900);color:var(--text-on-dark-muted);border-top:1px solid var(--border-dark)}
.foot-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:var(--sp-6) 0;font-size:.85rem;flex-wrap:wrap}
.foot-inner .mono{color:var(--text-on-dark-muted)}

@media(max-width:880px){
  nav.links{display:none}
  .event{grid-template-columns:auto 1fr}
  .event .btn{grid-column:2}
}