/* Mt Gravatt Men's Shed preview — based on Fred's SBMS/Samford house pattern.
   Brand colours taken from the MGMS logo + current site CSS:
   logo green #19554B · sun gold #FACE13 · tagline red #F90000 (logo only) · sky #9DC3E7
   site mint #4BD1A0 · site deep green #0C4426 */
:root{
  --green:#19554B;
  --green-d:#0C4426;
  --gold:#FACE13;
  --mint:#4BD1A0;
  --sky:#9DC3E7;
  --sky-l:#EEF5FC;
  --red:#F90000;
  --sand:#F8F6F0;
  --ink:#1A2622;
  --muted:#4A5A55;
  --line:#D6E2DE;
  --warn:#7A0015;
  --pad: clamp(.75rem, 3.5vw, 1rem);
}
*{box-sizing:border-box}
html{font-size:18px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(min-width:480px){html{font-size:19px}}
@media(min-width:820px){html{font-size:20px}}
body{margin:0;font-family:"Atkinson Hyperlegible",Verdana,"Segoe UI",system-ui,sans-serif;line-height:1.6;color:var(--ink);background:var(--sand);overflow-x:clip;max-width:100%}
img{max-width:100%;height:auto;display:block}
iframe{max-width:100%;border:0}
a{color:var(--green);text-underline-offset:3px;overflow-wrap:anywhere}
a:focus-visible,summary:focus-visible{outline:4px solid var(--gold);outline-offset:2px}
p,li,td,th,h1,h2,h3,figcaption{overflow-wrap:anywhere}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--pad);width:100%}
section.wrap{padding-top:1.25rem;padding-bottom:1.25rem}
@media(min-width:820px){section.wrap{padding-top:1.6rem;padding-bottom:1.6rem}}
h1{font-size:clamp(1.45rem,5.5vw,2.4rem);line-height:1.2;margin:.35em 0;color:var(--green-d)}
h2{font-size:clamp(1.15rem,4vw,1.55rem);color:var(--green);margin:1em 0 .4em;line-height:1.25}
h3{font-size:1.05rem;margin:.8em 0 .35em;color:var(--green-d)}
.lead{font-size:clamp(1rem,3.5vw,1.12rem);color:var(--muted)}
.preview{background:var(--green-d);color:#fff;text-align:center;font-size:.68rem;padding:.3rem var(--pad);line-height:1.35}

/* Header */
.top{background:#fff;border-bottom:4px solid var(--gold);position:sticky;top:0;z-index:20;box-shadow:0 2px 10px rgba(12,68,38,.1)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.35rem var(--pad);max-width:1280px;margin:0 auto;width:100%}
.brand{display:flex;align-items:center;gap:.45rem;text-decoration:none;color:var(--green-d);line-height:1.1;min-width:0;flex:1 1 auto}
.brand img{width:40px;height:40px;object-fit:cover;border-radius:8px;flex-shrink:0}
.brand span{font-size:.7rem;min-width:0;white-space:nowrap}
.brand b{display:block;font-size:.95rem}
@media(min-width:480px){.brand img{width:46px;height:46px}.brand span{font-size:.76rem}.brand b{font-size:1.02rem}.bar{gap:.7rem;padding:.45rem var(--pad)}}
.menu{position:relative;flex:0 0 auto}
.menu summary{list-style:none;cursor:pointer;background:var(--green);color:#fff;font-weight:800;padding:.45rem .85rem;border-radius:10px;min-height:44px;display:inline-flex;align-items:center;font-size:.9rem}
.menu summary::-webkit-details-marker{display:none}
.menu nav{position:absolute;right:0;top:calc(100% + .35rem);width:min(280px,calc(100vw - 1.5rem));background:#fff;border:2px solid var(--green);border-radius:12px;display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(0,0,0,.14);overflow:hidden;z-index:30}
.menu nav a{padding:.7rem 1rem;border-top:1px solid var(--line);text-decoration:none;font-weight:700;min-height:48px;display:flex;align-items:center;white-space:nowrap;color:var(--green-d)}
.menu nav a:first-child{border-top:0}
.menu nav a[aria-current="page"]{background:var(--sky-l)}
@media(min-width:1100px){
  .menu summary{display:none}
  .menu{position:static}
  .menu nav{position:static;width:auto;display:flex!important;flex-direction:row;flex-wrap:nowrap;gap:.1rem;border:0;border-radius:0;box-shadow:none;background:transparent;overflow:visible}
  .menu nav a{border:0;padding:0 .5rem;font-size:.74rem;border-radius:8px;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
  .menu nav a[aria-current="page"]{background:var(--green);color:#fff}
  .menu nav a:hover{background:var(--sky-l)}
  .menu:not([open]) nav{display:flex!important}
}

/* Hero */
.hero{background:linear-gradient(135deg,var(--green-d) 0%,var(--green) 70%);color:#fff;padding:1.35rem 0 1.5rem}
@media(min-width:820px){.hero{padding:2.2rem 0 2.4rem}}
.herogrid{display:grid;gap:1rem;align-items:center;min-width:0}
@media(min-width:820px){.herogrid{grid-template-columns:1.1fr .9fr;gap:1.4rem}}
.herogrid>*{min-width:0}
.hero h1{color:#fff;font-size:clamp(1.55rem,6vw,2.6rem)}
.kicker{color:var(--gold);font-weight:800;margin:0 0 .35rem;font-size:clamp(.78rem,3.2vw,.95rem)}
.hero .lead{color:#E9F3EF}
.herohours{font-size:.9rem;color:#E9F3EF;margin:.2rem 0 0}
.heroimg{border-radius:14px;border:4px solid var(--gold);width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--green-d)}
@media(min-width:820px){.heroimg{border-radius:18px;border-width:5px;aspect-ratio:4/3}}

/* Stats */
.stats{background:var(--gold);color:var(--green-d)}
.statgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem;padding-top:.8rem;padding-bottom:.8rem;text-align:center}
@media(min-width:720px){.statgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.statgrid b{display:block;font-size:clamp(1.25rem,5vw,1.7rem);line-height:1.1}
.statgrid span{font-size:.82rem;font-weight:700}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.65rem 1rem;border-radius:12px;background:var(--gold);color:var(--green-d);font-weight:800;text-decoration:none;border:3px solid var(--gold);text-align:center;line-height:1.25;max-width:100%}
@media(min-width:820px){.btn{min-height:54px;padding:.7rem 1.25rem}}
.btn:hover{filter:brightness(.96)}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.9)}
.btn.outline{background:#fff;color:var(--green);border-color:var(--green)}
.big{font-size:clamp(.95rem,3.5vw,1.02rem)}
.cta{display:flex;flex-direction:column;gap:.55rem;margin:1rem 0}
.cta .btn{width:100%}
@media(min-width:560px){.cta{flex-direction:row;flex-wrap:wrap}.cta .btn{width:auto;flex:1 1 auto;min-width:min(100%,14rem)}}

/* Layout bits */
.visit{display:grid;gap:1rem;margin-top:1rem;min-width:0}
@media(min-width:820px){.visit{grid-template-columns:1fr 1fr}}
.visit>*{min-width:0}
.card{background:#fff;border-radius:14px;padding:1rem var(--pad);box-shadow:0 2px 12px rgba(12,68,38,.08);margin:1rem 0;min-width:0}
@media(min-width:820px){.card{border-radius:16px;padding:1.15rem 1.3rem}}
.hours{border-left:8px solid var(--mint)}
.huge{font-size:clamp(1.05rem,4vw,1.25rem);line-height:1.35}
.mapcard{display:flex;flex-direction:column;gap:.75rem}
.mapframe{position:relative;width:100%;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--sky-l);border:1px solid var(--line)}
@media(min-width:820px){.mapframe{aspect-ratio:1/1;min-height:280px}}
.mapframe iframe.map{position:absolute;inset:0;width:100%;height:100%;border:0}
.mapfallback{margin:0;font-size:.95rem;line-height:1.45}
.mapfallback .btn{margin-top:.55rem}

.paths{display:grid;gap:.8rem;min-width:0}
@media(min-width:700px){.paths{grid-template-columns:repeat(2,minmax(0,1fr))}}
.path{display:block;background:#fff;border-radius:14px;padding:1rem var(--pad);text-decoration:none;color:var(--ink);border-top:6px solid var(--mint);box-shadow:0 2px 12px rgba(12,68,38,.08)}
.path h3{margin-top:0;color:var(--green-d)}
.path span{font-weight:800;color:var(--green)}
.path:hover{border-top-color:var(--gold)}

.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;min-width:0}
@media(min-width:560px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}}
@media(min-width:900px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tile{border-radius:12px;overflow:hidden;text-decoration:none;background:var(--green-d);color:#fff;min-width:0;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.tile img{width:100%;aspect-ratio:4/3;object-fit:cover}
.tile span{display:block;padding:.45rem .55rem;font-weight:800;font-size:clamp(.8rem,3.2vw,.9rem)}

.band{background:var(--sky-l);padding:1.1rem 0;border-top:3px solid var(--sky);border-bottom:3px solid var(--sky)}
.band h2{margin-top:.2rem}
.cards3{display:grid;gap:1rem;min-width:0}
@media(min-width:820px){.cards3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card.link{text-decoration:none;color:var(--ink);border-top:6px solid var(--green);margin:0}
.card.link h3{color:var(--green);margin-top:.2rem}
.two{display:grid;gap:1rem;min-width:0}
@media(min-width:820px){.two{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}}
.two>*{min-width:0}
.steps{padding-left:1.3rem}
.steps li{margin:.5rem 0}

.week{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 10px rgba(12,68,38,.06)}
.week th,.week td{padding:.65rem .75rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.week th{background:var(--green);color:#fff;width:7.5rem}
@media(max-width:640px){.week,.week tbody,.week tr,.week th,.week td{display:block;width:100%}.week td{padding-bottom:.85rem}}
.facts{width:100%;border-collapse:collapse}
.facts th,.facts td{text-align:left;vertical-align:top;padding:.5rem .3rem;border-bottom:1px solid var(--line)}
.facts th{color:var(--green-d);width:45%}

/* Gallery — images NOT lazy-loaded (Fred's note) */
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin:1rem 0;min-width:0}
@media(min-width:560px){.gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}}
@media(min-width:900px){.gallery{grid-template-columns:repeat(4,minmax(0,1fr))}.gallery.wide{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gallery.stack{grid-template-columns:minmax(0,1fr)}
.gallery figure{margin:0;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,.08);min-width:0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--line)}
.gallery figcaption{font-size:.72rem;padding:.4rem .5rem;color:var(--muted)}
.poster{margin:0}.poster img{border-radius:12px;max-width:340px;margin:0 auto;box-shadow:0 2px 12px rgba(0,0,0,.15)}
.banner{border-radius:10px;margin-bottom:.6rem}
.supporters{display:grid;gap:.6rem;margin:1rem 0}
@media(min-width:900px){.supporters{grid-template-columns:repeat(3,minmax(0,1fr))}}
.supporters img{border-radius:10px;background:#fff;width:100%}

.jump{display:flex;flex-wrap:wrap;gap:.4rem;margin:1rem 0}
.jump a{background:#fff;border:2px solid var(--green);border-radius:999px;padding:.35rem .8rem;min-height:44px;display:inline-flex;align-items:center;text-decoration:none;font-weight:700;color:var(--green);font-size:.85rem}
.jump a:hover{background:var(--sky-l)}
.section-h{border-bottom:4px solid var(--gold);padding-bottom:.2rem}
article.card h2{margin-top:.2rem}
.contact-line{background:var(--sky-l);border-radius:10px;padding:.5rem .7rem;font-size:.9rem}
blockquote{margin:.6rem 0;border-left:6px solid var(--gold);padding-left:.85rem;font-style:italic}
cite{display:block;font-size:.85rem;margin-top:.3rem;color:var(--muted);font-style:normal}
ul.big,ol.big{padding-left:1.15rem}
ul.big li,ol.big li{margin:.45rem 0}
.tag{display:inline-block;background:var(--mint);color:var(--green-d);font-weight:800;font-size:.72rem;padding:.2rem .55rem;border-radius:999px;margin:0 0 .2rem}
.note{background:#FFF9E0;border-left:6px solid var(--gold);padding:.65rem .85rem;border-radius:10px;margin:1rem 0}
.ph{background:#FFF0F0;border:2px dashed #B00020;color:var(--warn);padding:.3rem .55rem;border-radius:8px;font-weight:700;display:inline-block;max-width:100%;font-size:.85rem}
.archive .year{margin:.6rem 0}
.archive h3{margin:.3rem 0}
.months{display:flex;flex-wrap:wrap;gap:.35rem}
.months a{min-width:3.4rem;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--green);color:#fff;text-decoration:none;font-weight:700;font-size:.85rem}
.stories{display:grid;gap:.6rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:620px){.stories{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:960px){.stories{grid-template-columns:repeat(3,minmax(0,1fr))}}
.story{display:flex;flex-direction:column;background:#fff;border-radius:12px;padding:.75rem .9rem;text-decoration:none;color:var(--ink);border-left:6px solid var(--mint);box-shadow:0 1px 6px rgba(0,0,0,.07);min-height:48px}
.story b{color:var(--green-d)}
.story span{font-size:.78rem;color:var(--muted)}

.foot{background:var(--green-d);color:#E9F3EF;margin-top:1.75rem;padding:1.35rem 0 1.1rem}
.foot a{color:var(--gold)}
.foot h2{color:#fff;font-size:1.05rem;margin-top:0}
.footlogo{border-radius:10px;max-width:260px;margin-bottom:.6rem}
.grid3{display:grid;gap:1rem;min-width:0}
@media(min-width:820px){.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.small{font-size:.82rem}
main{max-width:100%;overflow-x:clip}