/* Kanga Trees — concept picker. Same real palette as the three concepts:
   #2D5016 --primary and #71C838 --chart-1 from kangatrees.com.au, the amber
   #FBBF24 they use across their live markup, the bone #EFE9DD and olive
   #6E7A2C of the KANGA TREES logo, on their own near black.
   Oswald + Inter, both declared in their live stylesheet. */

:root{
  --ink:#070806; --ink-2:#0D1008; --panel:#141810; --line:#272C1D; --line-2:#39432A;
  --bone:#EFE9DD; --bone-2:#C2BFB2; --bone-3:#8C8A7E;
  --olive:#7E8B33; --olive-lt:#9BAA45; --leaf:#71C838; --forest:#2D5016; --amber:#FBBF24;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--ink); color:var(--bone); font:400 1rem/1.68 Inter,-apple-system,sans-serif; overflow-x:hidden; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block; height:auto}
h1,h2,h3{font-family:Oswald,"Arial Narrow",sans-serif; font-weight:600; line-height:1.06; margin:0; text-transform:uppercase}
p{margin:0 0 1em}
a{color:inherit}
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--amber); outline-offset:3px; border-radius:6px}
.wrap{width:min(100% - 34px, 1140px); margin-inline:auto}

.top{
  padding:46px 0 40px; border-bottom:1px solid var(--line);
  background:radial-gradient(90% 70% at 50% 0%, rgba(126,139,51,.2), transparent 66%), linear-gradient(180deg,#0C1008,var(--ink));
  text-align:center;
}
.top-in{display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:28px}
.top-in img{width:56px}
.top-in b{font-family:Oswald,sans-serif; font-size:1.2rem; letter-spacing:.12em; text-transform:uppercase}
.top-in b i{color:var(--olive-lt); font-style:normal}
.top h1{font-size:clamp(2.1rem,8.4vw,3.7rem); font-weight:700; margin-bottom:20px; letter-spacing:-.005em}
.top h1 em{font-style:normal; color:var(--amber)}
.top > .wrap > p{color:var(--bone-2); max-width:62ch; margin:0 auto 20px; font-size:1.02rem}
.note{
  font-size:.85rem; color:var(--bone-3); max-width:74ch; margin:26px auto 0; line-height:1.65;
  border:1px dashed var(--line-2); border-radius:14px; padding:16px 18px; text-align:left;
}
.note b{color:var(--olive-lt)}

main{padding:52px 0 20px}
.grp{margin-bottom:44px}
.grp h2{font-size:1.5rem; margin-bottom:8px}
.grp .sub{color:var(--bone-3); font-size:.94rem; margin-bottom:26px}
.cards{display:grid; gap:16px}
.card{
  display:block; text-decoration:none; background:var(--panel); border:1px solid var(--line);
  border-radius:20px; overflow:hidden; transition:border-color .18s, transform .18s;
}
.card:hover{border-color:var(--olive); transform:translateY(-3px)}
.shot{display:block; background:#0A0C07; border-bottom:1px solid var(--line)}
.shot img{width:100%; aspect-ratio:1200/630; object-fit:cover; object-position:50% 0}
.body{display:block; padding:22px 20px 24px}
.tag{
  display:inline-block; font-family:Oswald,sans-serif; font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--amber); border:1px solid rgba(251,191,36,.34);
  background:rgba(251,191,36,.07); border-radius:999px; padding:5px 11px; margin-bottom:13px;
}
.body h3{font-size:1.45rem; margin:0 0 10px; letter-spacing:.02em}
.body p{color:var(--bone-2); font-size:.93rem; margin:0 0 16px; line-height:1.6}
.go{display:inline-block; font-family:Oswald,sans-serif; text-transform:uppercase; letter-spacing:.08em; font-size:.86rem; color:var(--leaf); min-height:40px; padding-block:9px}
.card:hover .go{color:var(--amber)}

.ft{border-top:1px solid var(--line); padding:34px 0 30px; background:#050604}
.disc{font-size:.79rem; color:#6C685E; max-width:80ch; line-height:1.65; margin:0 0 20px}
.ft-bot{display:flex; flex-wrap:wrap; gap:12px 20px; justify-content:space-between; align-items:center; font-size:.82rem; color:var(--bone-3)}
.by{color:var(--bone-3); text-decoration:none; display:inline-block; padding:10px 2px; min-height:40px}
.by b{color:var(--olive-lt); font-weight:700}
.by:hover b{color:var(--amber)}

@media (min-width:760px){
  .cards{grid-template-columns:repeat(3,1fr)}
  .top{padding:66px 0 56px}
  main{padding:66px 0 24px}
}
@media (max-width:759px){
  .top-in img{width:48px}
  .top-in b{font-size:1.05rem}
}