/*
  Sketched History Australia - under construction page
  Fonts (self-hosted, subset to Latin, both SIL Open Font License 1.1; texts in assets/fonts/):
    - Titan One  (c) 2011 Rodrigo Fuenzalida - OFL 1.1  (display; closest match to the logo lettering)
    - Nunito     (c) 2014 The Nunito Project Authors - OFL 1.1  (body)
  Palette sampled from logo_wordmark_AUS.jpg
*/
@font-face{font-family:"Titan One";src:url("../fonts/titan-one-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito";src:url("../fonts/nunito-latin.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}

:root{
  --cream:#F6EED7;      /* logo background, exact */
  --cream-2:#FBF6E6;    /* lighter card paper */
  --red:#B02B25;        /* SKETCHED letters */
  --red-deep:#96201A;   /* ribbon tails */
  --gold:#BC8636;       /* HISTORY letters */
  --gold-bright:#D6A53A;/* AUSTRALIA ribbon text */
  --navy:#1B2540;       /* outlines + ribbon */
  --ink:#2A2A3A;
  --display:"Titan One","Arial Black",Impact,sans-serif;
  --body:"Nunito","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;display:flex;flex-direction:column;
  background-color:var(--cream);
  background-image:radial-gradient(rgba(27,37,64,.07) 1.2px,transparent 1.4px);
  background-size:22px 22px;
  color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.6;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--red);text-underline-offset:3px}
a:hover{color:var(--red-deep)}
:focus-visible{outline:4px solid var(--navy);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--navy);color:var(--cream);padding:.5rem 1rem;border-radius:8px;z-index:10}
.skip:focus{left:8px}
.wrap{width:min(100% - 2rem,64rem);margin-inline:auto}

.stripe{height:14px;background:linear-gradient(var(--navy) 0 4px,var(--red) 4px 9px,var(--gold-bright) 9px 14px)}

/* hero */
.hero{text-align:center;padding:1.5rem 0 2.5rem}
.logo{width:min(72vw,300px);margin:0 auto .25rem}
.tag{
  display:inline-block;margin:1.1rem 0 .5rem;padding:.3rem 1.2rem .35rem;
  background:var(--red);color:var(--cream-2);border:3px solid var(--navy);border-radius:999px;
  font-family:var(--display);font-size:.95rem;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 3px 0 var(--navy)
}
h1{
  margin:.6rem auto .5rem;max-width:15ch;
  font-family:var(--display);font-weight:400;line-height:1.05;letter-spacing:.01em;
  font-size:clamp(2.35rem,9.5vw,4.5rem);color:var(--red);
  -webkit-text-stroke:.09em var(--navy);paint-order:stroke fill;
  text-shadow:0 .06em 0 var(--navy);
}
h1 .gold{color:var(--gold-bright)}
.sub{margin:0 auto 1.5rem;max-width:34rem;font-size:clamp(1.1rem,3.6vw,1.35rem);font-weight:600;color:var(--navy)}
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--display);font-size:1.2rem;letter-spacing:.02em;text-decoration:none;
  color:var(--navy);background:var(--gold-bright);
  padding:.8rem 1.6rem;border:4px solid var(--navy);border-radius:14px;
  box-shadow:0 5px 0 var(--navy);transition:transform .12s,box-shadow .12s,background .12s
}
.btn:hover{color:var(--navy);background:#E3B54B;transform:translateY(2px);box-shadow:0 3px 0 var(--navy)}
.btn:active{transform:translateY(5px);box-shadow:0 0 0 var(--navy)}
.btn svg{width:1.5rem;height:1.5rem;flex:none}

/* banner band */
.band{border-block:6px solid var(--navy);background:var(--navy);position:relative}
.band::before,.band::after{content:"";position:absolute;left:0;right:0;height:5px;background:var(--red);z-index:1}
.band::before{top:0}.band::after{bottom:0}
.band img{width:100%;aspect-ratio:1600/1100;object-fit:cover}
@media (min-width:700px){.band img{aspect-ratio:2560/900;max-height:420px;object-position:center 45%}}

/* what's coming */
.coming{padding:2.75rem 0 1.5rem}
h2{
  margin:0 0 1.5rem;text-align:center;font-family:var(--display);font-weight:400;
  font-size:clamp(1.8rem,6.5vw,2.6rem);line-height:1.1;color:var(--gold-bright);
  -webkit-text-stroke:.1em var(--navy);paint-order:stroke fill;text-shadow:0 .05em 0 var(--navy)
}
.cards{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem;grid-template-columns:1fr}
@media (min-width:760px){.cards{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
.card{
  position:relative;background:var(--cream-2);border:4px solid var(--navy);border-radius:18px;
  padding:1.4rem 1.25rem 1.3rem;box-shadow:6px 7px 0 var(--navy)
}
.card .ico{
  width:64px;height:64px;margin:-2.7rem 0 .6rem;padding:10px;border:4px solid var(--navy);border-radius:50%;
  background:var(--gold-bright);display:grid;place-items:center
}
.card .ico svg{width:100%;height:100%}
.card h3{margin:0 0 .35rem;font-family:var(--display);font-weight:400;font-size:1.3rem;line-height:1.2;color:var(--red)}
.card p{margin:0;font-size:1rem}
.status{
  display:inline-block;margin-top:.8rem;padding:.1rem .7rem;border:3px solid var(--navy);border-radius:999px;
  font-weight:800;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;background:var(--cream);color:var(--navy)
}
.status.now{background:var(--navy);color:var(--gold-bright)}
.cards{padding-top:1.9rem}

/* contact */
.contact{text-align:center;padding:2.25rem 0 2.75rem;font-size:1.15rem;font-weight:600;color:var(--navy)}
.contact p{margin:0}
.contact a{font-weight:800;word-break:break-word}

/* footer */
footer{margin-top:auto;background:var(--navy);color:var(--cream);text-align:center;padding:1.4rem 0 1.6rem;border-top:6px solid var(--red)}
footer p{margin:.15rem 0}
footer .name{font-family:var(--display);font-size:1.15rem;color:var(--gold-bright);letter-spacing:.03em}
footer .note{font-size:.95rem}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nw{white-space:nowrap}