/* TerraWander — direction C, "botanical plate"
   Brand colours locked 26 Aug 2026. Deep eucalypt block, warm paper below,
   apricot as the accent, rust for links, near-black-green as ink. */
:root{
  --paper:#F6F3EC;
  --paper-2:#EDE9DD;
  --deep:#3E4C37;
  --deep-2:#35422F;
  --deep-ink:#EDEFE3;
  --deep-soft:#D2D9C6;
  --ink:#20241D;
  --ink-soft:#525A4B;
  --rust:#A44A3E;
  --rust-deep:#8A3A30;
  --apricot:#F89E68;
  --euc:#77896B;
  --stone:#7C7565;
  --rule:#DCD6C6;
  --rule-soft:#E6E1D3;
  --focus:#A44A3E;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#14170F; --paper-2:#1A1E14;
    --deep:#2B3524; --deep-2:#232C1E; --deep-ink:#EDEFE3; --deep-soft:#B9C2A9;
    --ink:#EAEDE0; --ink-soft:#B3BBA6;
    --rust:#E08B78; --rust-deep:#EFA795; --apricot:#F89E68; --euc:#9CAE90;
    --stone:#9A9684; --rule:#2E3526; --rule-soft:#242A1D; --focus:#E08B78;
  }
}
:root[data-theme="dark"]{
  --paper:#14170F; --paper-2:#1A1E14;
  --deep:#2B3524; --deep-2:#232C1E; --deep-ink:#EDEFE3; --deep-soft:#B9C2A9;
  --ink:#EAEDE0; --ink-soft:#B3BBA6;
  --rust:#E08B78; --rust-deep:#EFA795; --apricot:#F89E68; --euc:#9CAE90;
  --stone:#9A9684; --rule:#2E3526; --rule-soft:#242A1D; --focus:#E08B78;
}

*{box-sizing:border-box}
[hidden]{display:none!important}   /* must beat .field{display:flex} */
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:Karla,"Helvetica Neue",Arial,sans-serif;
  font-size:17px; line-height:1.62;
}
img,svg{max-width:100%}
a{color:var(--rust); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--rust-deep)}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:2px}

.wrap{max-width:1080px; margin:0 auto; padding-inline:24px}
.col{max-width:64ch}

/* ---------- type ---------- */
h1,h2,h3,.display{
  font-family:Newsreader,Georgia,"Times New Roman",serif;
  font-weight:300; text-wrap:balance; margin:0; letter-spacing:-.008em;
}
h1{font-size:clamp(2.4rem,6.4vw,4.1rem); line-height:1.04; color:#fff}
h1 em{font-style:italic; color:var(--apricot); font-weight:300}
h2{font-size:clamp(1.6rem,3.3vw,2.3rem); line-height:1.14; color:var(--deep)}
h3{font-size:1.2rem; line-height:1.32; font-weight:400; color:var(--deep)}
p{margin:0 0 1.05em}
.lede{font-size:1.14rem; line-height:1.58; color:var(--ink-soft)}
h1 + .lede, h2 + .lede{margin-top:1.15rem}
h1 + .btn-row{margin-top:1.9rem}
.label{
  font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--euc); margin:0 0 1rem;
}
.label--quiet{color:var(--stone)}
.pull{
  font-family:Newsreader,Georgia,serif; font-style:italic; font-weight:300;
  font-size:clamp(1.3rem,2.8vw,1.85rem); line-height:1.3; color:var(--deep);
  text-wrap:balance; margin:0; max-width:34ch;
}
.small{font-size:.95rem; color:var(--ink-soft)}
.tnum{font-variant-numeric:tabular-nums}
.tag{
  display:inline-block; font-size:.64rem; font-weight:600; letter-spacing:.17em;
  text-transform:uppercase; color:var(--deep); border:1px solid var(--rule);
  padding:4px 10px; margin-bottom:1rem; border-radius:2px; align-self:flex-start;
}

/* ---------- the deep block: header + hero read as one plate ---------- */
.site-head{background:var(--deep); color:var(--deep-ink)}
.site-head .wrap{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px;
  padding-block:18px; border-bottom:1px solid rgba(255,255,255,.13);
}
.brand{display:flex; align-items:center; flex:0 0 auto}
.brand img{height:32px; width:auto; display:block}
nav.main{margin-left:auto; display:flex; flex-wrap:wrap; align-items:center; gap:6px 22px; font-size:.93rem}
nav.main a{color:var(--deep-soft); text-decoration:none; padding-block:4px}
nav.main a:hover{color:#fff}
nav.main a[aria-current="page"]{color:#fff; box-shadow:inset 0 -2px 0 var(--apricot)}

.hero{
  background:var(--paper); color:var(--ink);
  padding-block:clamp(38px,5.6vw,72px); position:relative; overflow:hidden;
  border-bottom:1px solid var(--rule-soft);
}
.hero .wrap{position:relative}
.hero h1{max-width:23ch; color:var(--deep)}
.hero .lede{max-width:56ch}
.hero .plate{
  position:absolute; right:-190px; top:-60px; width:620px;
  opacity:.3; pointer-events:none;
}

/* the one dark plate — homepage only */
.hero--dark{background:var(--deep); color:var(--deep-ink); border-bottom:none;
  padding-block:clamp(44px,6.5vw,88px)}
.hero--dark h1{color:#fff}
.hero--dark .label{color:var(--apricot)}
.hero--dark .lede{color:var(--deep-soft)}
.hero--dark .plate{opacity:.5; right:-160px; top:-80px; width:720px}

/* buttons */
.btn{
  display:inline-block; font-size:.94rem; font-weight:600; text-decoration:none;
  padding:11px 20px; border:1.5px solid var(--rust); color:var(--rust);
  background:transparent; border-radius:2px;
}
.btn:hover{background:var(--rust); color:var(--paper)}
.btn--solid{background:var(--rust); color:var(--paper)}
.btn--solid:hover{background:var(--rust-deep); color:var(--paper)}
.hero--dark .btn--solid{background:var(--apricot); border-color:var(--apricot); color:#20241D}
.hero--dark .btn--solid:hover{background:#fff; border-color:#fff; color:#20241D}
.hero--dark .btn{border-color:var(--deep-soft); color:var(--deep-ink)}
.hero--dark .btn:hover{background:var(--deep-ink); color:var(--deep)}
.btn-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:1.7rem}

/* ---------- sections on paper ---------- */
section{padding-block:clamp(42px,5.8vw,74px)}
section + section:not(.strip){border-top:1px solid var(--rule-soft)}
section.band{background:var(--paper-2)}
section.band + section{border-top:1px solid var(--rule-soft)}

/* full-bleed photo strip beside text */
.strip{padding:0; display:grid; grid-template-columns:1fr; border-top:none}
@media (min-width:780px){ .strip{grid-template-columns:1.2fr 1fr} }
.strip img{width:100%; height:100%; min-height:250px; object-fit:cover; object-position:24% 58%; display:block}
.strip .txt{padding:clamp(28px,4.4vw,58px); display:flex; flex-direction:column; justify-content:center}
.strip .txt p:last-child{margin-bottom:0}

/* two-up */
.two{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(28px,4vw,54px)}
.two > div > h3{margin-bottom:.45rem}
@media (min-width:760px){
  .divided > div + div{border-left:1px solid var(--rule-soft); padding-left:clamp(28px,4vw,54px)}
}

/* ruled data rows */
.rows{border-top:1px solid var(--rule); margin:1.4rem 0 0}
.row{
  display:flex; flex-wrap:wrap; gap:4px 18px; align-items:baseline;
  padding:13px 0; border-bottom:1px solid var(--rule-soft);
}
.row dt,.row .k{flex:1 1 200px; margin:0; font-weight:500}
.row dd,.row .v{
  flex:0 0 auto; margin:0; font-family:Newsreader,Georgia,serif; font-size:1.14rem;
  font-variant-numeric:tabular-nums; color:var(--rust);
}
.row .n{flex:1 1 100%; font-size:.9rem; color:var(--stone); margin:0}

/* schedule table */
.tablewrap{overflow-x:auto; margin-top:1.6rem}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:.97rem}
caption{text-align:left; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--euc); padding-bottom:12px}
th,td{text-align:left; padding:12px 14px 12px 0; border-bottom:1px solid var(--rule-soft); vertical-align:baseline}
thead th{
  font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--deep); border-bottom:1.5px solid var(--euc);
}
td.wk{font-family:Newsreader,Georgia,serif; font-size:1.4rem; color:var(--apricot); width:2.6em; font-variant-numeric:tabular-nums}
td.ttl{font-weight:600; width:15em; color:var(--deep)}

/* lists */
ul.tick{list-style:none; padding:0; margin:1.1rem 0 0}
ul.tick li{position:relative; padding-left:1.5em; margin-bottom:.62em}
ul.tick li::before{content:""; position:absolute; left:0; top:.62em; width:8px; height:8px; background:var(--apricot); border-radius:50%}
ul.tick--euc li::before{background:var(--euc)}
ol.steps{list-style:none; counter-reset:s; padding:0; margin:1.5rem 0 0}
ol.steps li{counter-increment:s; position:relative; padding-left:3.1rem; margin-bottom:1.4rem}
ol.steps li::before{
  content:counter(s); position:absolute; left:0; top:-.14em;
  font-family:Newsreader,Georgia,serif; font-size:1.7rem; font-weight:300;
  color:var(--apricot); font-variant-numeric:tabular-nums;
}
ol.steps h3{margin-bottom:.25rem}

/* the specimen plate — used once per page at most */
.panel{
  background:var(--paper); border:1px solid var(--rule);
  padding:clamp(24px,3.4vw,38px); border-radius:2px;
}
.band .panel{background:var(--paper)}
.panel .label{color:var(--euc)}
.note{border-left:3px solid var(--euc); padding:2px 0 2px 18px; margin:1.6rem 0}
.todo{
  display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.1em;
  background:var(--apricot); color:#20241D; padding:2px 8px; border-radius:2px; text-transform:uppercase;
}

/* portrait */
.bio{display:grid; grid-template-columns:1fr; gap:clamp(24px,3.5vw,44px); align-items:start}
@media (min-width:740px){ .bio{grid-template-columns:210px 1fr} }
.bio img{width:100%; height:auto; display:block; border-radius:2px; aspect-ratio:1/1; object-fit:cover; object-position:50% 40%}

figure{margin:0}
figcaption{font-size:.8rem; color:var(--stone); padding-top:10px; border-top:1px solid var(--rule-soft); margin-top:10px}

/* ---------- footer: the plate closes the page ---------- */
.site-foot{
  position:relative; overflow:hidden; color:var(--deep-ink);
  background:var(--deep-2); padding-block:clamp(42px,5.4vw,66px) 30px;
}
.leafmark{position:absolute; right:-230px; bottom:-300px; width:700px; opacity:.22; pointer-events:none}
.site-foot .wrap{position:relative}
.site-foot .brandmark{height:28px; width:auto; display:block; margin-bottom:26px}
.foot-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:30px}
.foot-grid h3{font-family:Karla,sans-serif; font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--apricot); margin-bottom:.8rem}
.foot-grid ul{list-style:none; padding:0; margin:0}
.foot-grid li{margin-bottom:.44em; font-size:.95rem; color:var(--deep-soft)}
.foot-grid a{color:var(--deep-ink); text-decoration:none}
.foot-grid a:hover{color:var(--apricot); text-decoration:underline}
.legal{
  margin-top:clamp(30px,4vw,46px); padding-top:18px; border-top:1px solid rgba(255,255,255,.15);
  font-size:.84rem; color:#9AA38C; display:flex; flex-wrap:wrap; gap:6px 20px;
}
.legal a{color:#9AA38C}
.legal a:hover{color:var(--apricot)}

@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }

/* the two programs, side by side and brief */
.progs{display:grid; grid-template-columns:1fr; gap:clamp(26px,3.4vw,44px); margin-top:1.8rem}
@media (min-width:680px){ .progs{grid-template-columns:1fr 1fr} }
@media (min-width:980px){ .progs{grid-template-columns:repeat(3,1fr)} }
.prog{border-top:1.5px solid var(--euc); padding-top:18px}
.prog h3{margin-bottom:.5rem}
.prog p{margin-bottom:.75em}
.prog .facts{font-size:.9rem; color:var(--stone); border-top:1px solid var(--rule-soft);
  padding-top:10px; margin-top:.9rem}
.prog .btn{margin-top:.5rem}

/* a section with a photo alongside, at a sensible size */
.withpic{display:grid; grid-template-columns:1fr; gap:clamp(26px,3.6vw,48px); align-items:start}
@media (min-width:820px){ .withpic{grid-template-columns:1.6fr .8fr} }
.withpic figure{max-width:330px}
.withpic figure img{width:100%; height:auto; display:block; object-fit:cover;
  aspect-ratio:4/3; object-position:30% 62%}

/* ---------- the booking form ---------- */
.form{margin-top:1.8rem; max-width:44rem}
.fgrid{display:grid; grid-template-columns:1fr; gap:18px}
@media (min-width:620px){ .fgrid--2{grid-template-columns:1fr 1fr} }
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-size:.82rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--euc)}
.field .hint{font-size:.85rem; color:var(--stone); font-weight:400; letter-spacing:0; text-transform:none}
.field input,.field select,.field textarea{
  font-family:Karla,Arial,sans-serif; font-size:1rem; line-height:1.4;
  color:var(--ink); background:var(--paper);
  border:1px solid var(--rule); border-radius:2px;
  padding:12px 13px; width:100%;
  -webkit-text-fill-color:var(--ink);        /* iOS/Android override guard */
  appearance:none;
}
.field input::placeholder,.field textarea::placeholder{color:var(--stone); opacity:1}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--euc) 50%),
                   linear-gradient(135deg,var(--euc) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
  padding-right:42px;
}
/* autofill leaves its own colours behind on some phones */
.field input:-webkit-autofill{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px var(--paper) inset;
}
.field textarea{min-height:130px; resize:vertical; line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--focus); outline-offset:1px; border-color:var(--euc);
}
.form button{
  font-family:Karla,Arial,sans-serif; font-size:.98rem; font-weight:600; cursor:pointer;
  padding:13px 26px; border:1.5px solid var(--rust); background:var(--rust); color:var(--paper);
  border-radius:2px; margin-top:.4rem;
}
.form button:hover{background:var(--rust-deep); border-color:var(--rust-deep)}
.form .after{font-size:.9rem; color:var(--stone); margin:1rem 0 0}

/* form result message */
.formnote{margin-top:1.2rem; padding:14px 16px; border-radius:2px; font-size:.97rem; display:none}
.formnote.ok{display:block; background:var(--paper); border:1px solid var(--euc); color:var(--ink)}
.formnote.bad{display:block; background:var(--paper); border:1px solid var(--rust); color:var(--ink)}

/* pay-on-booking block, revealed after a Family Field Day booking */
.paybox{
  margin-top:2.2rem; padding:clamp(22px,3.2vw,34px);
  background:var(--paper); border:1px solid var(--euc); border-radius:2px;
}
.paybox h2{margin:0}
.paybox .row .v{font-size:1.2rem; color:var(--deep); letter-spacing:.01em}
.paybox #payref{color:var(--rust); font-weight:500}