/* ebono.au — stage 2 stylesheet. The look is from the approved design (CD's stage 2 brief of 22 Oct):
   white with pale ice-blue bands, black used sparingly, Cinzel for the wordmark and headings,
   IBM Plex for text. Fonts are self-hosted from ../fonts/ (SIL OFL); nothing is requested from a
   third party. Font URLs are relative to this file so the site works from any address. */
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/IBMPlexSans-Regular.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:italic;font-display:swap;src:url(../fonts/IBMPlexSans-Italic.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/IBMPlexSans-Medium.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/IBMPlexSans-SemiBold.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/IBMPlexMono-Regular.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/IBMPlexMono-Medium.woff2) format("woff2")}
/* One variable file carries both weights the design uses (500 and 700). */
@font-face{font-family:"Cinzel";font-weight:400 900;font-style:normal;font-display:swap;src:url(../fonts/Cinzel-VariableFont_wght.ttf) format("truetype")}

:root{
  --ink:#0E1216; --body:#2B333B; --muted:#4A5560; --rule:#DCE3E8; --band:#EEF7FB;
  --black:#07090C; --silver:#C9CED4; --ice:#A9DCEF; --deep:#1D6A87; --yellow:#F5D76E;
  --display:"Cinzel",Georgia,serif; --sans:"IBM Plex Sans",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;display:flex;flex-direction:column;min-height:100vh}
main{flex:1}
a{color:var(--deep)}a:hover{color:var(--ink)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--deep);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 14px;z-index:30}
.skip:focus{left:8px;top:8px}
.wrap{max-width:1120px;margin:0 auto;padding-left:20px;padding-right:20px}
@media (min-width:700px){.wrap{padding-left:32px;padding-right:32px}}

/* Header: a black bar with the logo and EBONO in white */
.site-header{background:var(--black)}
.bar{max-width:1120px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.brand-mark{width:40px;height:40px;border-radius:6px;display:block;object-fit:cover;object-position:left center}
.brand-name{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:.14em}
.menu-btn{width:44px;height:44px;background:none;border:1px solid #2A313A;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.nav{display:none;flex-basis:100%;flex-direction:column;gap:2px;padding:8px 0 4px}
.nav.is-open{display:flex}
.nav a{color:var(--silver);text-decoration:none;font-size:16px;min-height:44px;display:flex;align-items:center}
.nav a:hover{color:#fff}
.nav .nav-cta{margin-top:6px;background:var(--ice);color:var(--black);font-weight:600;justify-content:center;border-radius:6px;padding:0 18px}
.nav .nav-cta:hover{color:var(--black);background:#C4E8F6}
@media (min-width:900px){
  .bar{padding:16px 32px}
  .brand-mark{width:48px;height:48px;border-radius:8px}
  .brand-name{font-size:26px}
  .menu-btn{display:none}
  .nav{display:flex;flex-basis:auto;flex-direction:row;align-items:center;gap:28px;padding:0}
  .nav a{font-size:15px}
  .nav .nav-cta{margin-top:0}
}

/* Footer: black */
.site-footer{background:var(--black);margin-top:48px}
.foot{max-width:1120px;margin:0 auto;padding:22px 20px;display:flex;flex-direction:column;gap:10px;font-size:13px;color:var(--silver)}
.foot p{margin:0}
.foot .links{display:flex;gap:20px}
.foot a{color:var(--silver)}
@media (min-width:700px){.foot{padding-left:32px;padding-right:32px}}

/* Pages: bands */
.band{padding:28px 0 8px}
.band .wrap>*{max-width:46rem}
.band .wrap>.tiles,.band .wrap>.eyebrow{max-width:none}
.band-hero{background:var(--band);padding:32px 0 28px}
.band-tiles{background:var(--band);padding:24px 0 32px}
.band-close{padding:36px 0 8px}
h1,h2,h3{font-family:var(--display);font-weight:700;color:var(--ink);letter-spacing:.01em}
h1{margin:0 0 14px;font-size:clamp(28px,7vw,48px);line-height:1.18}
h2{margin:0 0 12px;font-size:clamp(21px,4.4vw,28px);line-height:1.25}
h3{margin:0 0 10px;font-size:21px;line-height:1.25}
p,ul,ol{margin:0 0 16px;color:var(--body)}
h1+p{font-size:18px;line-height:1.6}
li{margin-bottom:8px}
blockquote{margin:0 0 16px;padding:2px 0 2px 18px;border-left:4px solid var(--rule);color:var(--muted)}
em{color:var(--muted)}
hr{border:0;border-top:1px solid var(--rule);margin:24px 0}
.eyebrow{margin:0 0 18px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hint-mouse{display:none}
@media (hover:hover) and (pointer:fine){.hint-touch{display:none}.hint-mouse{display:inline}}

/* Cards (the "two ways in" blocks) */
.card{margin:12px 0 0;padding:22px 20px;border:1px solid var(--rule);border-radius:8px;background:#fff}
.card h3{font-size:20px}
.card-dark{background:var(--black);border-color:var(--black);color:#E6E9EC}
.card-dark h3{color:#fff}.card-dark p,.card-dark li{color:var(--silver)}.card-dark strong{color:var(--ice)}
.card-dark a{color:var(--ice)}

/* Buttons and calls to action */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;background:var(--black);color:#fff;border:0;border-radius:6px;font:600 16px/1.2 var(--sans);text-decoration:none;cursor:pointer}
.btn:hover{background:#1A2027;color:#fff}
.card-dark .btn{background:var(--ice);color:var(--black)}.card-dark .btn:hover{background:#C4E8F6;color:var(--black)}
.cta{margin:8px 0 18px}

/* Home tiles */
.defs{position:absolute;width:0;height:0}
.tiles{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:1000px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tile{position:relative;background:#fff;border:1px solid var(--rule);border-radius:8px;overflow:hidden;display:flex;flex-direction:column}
.tile-media{position:relative;height:220px;background:var(--black)}
.layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;transition:opacity .5s ease}
.l2,.l3{opacity:0}
/* -1 colour hopeful on load; -2 black and white on the reveal; -3 colour reality on PC roll-off */
.tile.is-open .l1,.tile.is-after .l1{opacity:0}.tile.is-open .l2{opacity:1}.tile.is-after .l3{opacity:1}
.ai-label{position:absolute;left:8px;bottom:8px;z-index:1;padding:2px 6px;background:rgba(7,9,12,.7);color:#E6E9EC;font:400 10px/1.4 var(--mono);letter-spacing:.06em}
.star-link{position:absolute;right:8px;bottom:8px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--black);border-radius:50%;z-index:3}
.tile-body{padding:16px 18px 18px;min-height:130px}
.tile .tag{font:400 11px/1.4 var(--mono);letter-spacing:.16em;color:var(--muted);margin-bottom:8px}
.tile .ttl{font-family:var(--display);font-weight:700;font-size:21px;line-height:1.25;color:var(--ink);margin-bottom:8px}
.tile .line{font-size:15px;line-height:1.5;color:var(--body)}
.tile .open{display:none}.tile.is-open .open,.tile.is-after .open{display:block}.tile.is-open .closed,.tile.is-after .closed{display:none}
.tile .open .tag{color:var(--deep)}
.tile .assumes{font-size:18px;line-height:1.4;color:var(--deep);margin-bottom:8px}
.tile .verdict{font-size:18px;font-weight:700;color:var(--ink);margin-bottom:10px}
.tile .go{display:flex;align-items:center;justify-content:space-between;min-height:40px;border-top:1px solid var(--rule);padding-top:6px;font-weight:600;font-size:15px;color:var(--ink)}
.tile .go span{color:var(--deep)}
.tile-link{position:absolute;inset:0;z-index:2;display:block}
.star-link:focus-visible{outline:3px solid var(--ice);outline-offset:2px}
/* The star: a yellow glow runs up the left edge of the top point and flashes at the tip,
   half a second every three seconds. No motion if the device asks for reduced motion. */
.eb-star{overflow:visible}.eb-star .eb-body{fill:var(--ice)}
.eb-run,.eb-tip{opacity:0}.eb-tip{transform-box:fill-box;transform-origin:center}
.eb-pulse .eb-run{stroke-dasharray:3 20;animation:ebRun 3s linear infinite}
.eb-pulse .eb-tip{animation:ebTip 3s ease-out infinite}
@keyframes ebRun{0%{opacity:1;stroke-dashoffset:3}12%{opacity:1;stroke-dashoffset:-7}13%,100%{opacity:0;stroke-dashoffset:-7}}
@keyframes ebTip{0%,11%{opacity:0;transform:scale(.4)}14%{opacity:1;transform:scale(1.5)}16.7%,100%{opacity:0;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.eb-pulse .eb-run,.eb-pulse .eb-tip{animation:none}.layer{transition:none}}

/* Forms */
.reg,.book{max-width:40rem;margin-top:12px}
.reg label,.book label{display:block;font-weight:500;font-size:15px;margin-bottom:4px;color:var(--body)}
.book .opt{font-weight:400;color:var(--muted)}
.reg input[type=text],.reg input[type=email],.reg select,.reg textarea,.book input[type=text],.book input[type=email],.book input[type=tel],.book select,.book textarea{display:block;width:100%;min-height:44px;margin-top:4px;padding:10px 12px;border:1px solid #8A98A2;border-radius:6px;font:inherit;font-size:16px;color:var(--ink);background:#fff}
.book fieldset{border:0;padding:0;margin:0 0 20px}.book legend{font-weight:500;padding:0;margin-bottom:6px}
.book label.choice{font-weight:400;display:flex;gap:10px;align-items:center;margin-bottom:6px}
.notice{color:var(--muted);font-size:14px;line-height:1.5}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.error{color:#8A1C1C;font-weight:500}
.thanks,.done{max-width:40rem;margin-top:12px;padding:14px;background:var(--band);border-radius:6px;font-size:15px;line-height:1.5;color:var(--ink)}
[hidden]{display:none!important}

/* Fences: never live copy */
mark.fence{background:var(--yellow);color:var(--ink);padding:0 4px;border-radius:3px;font-family:var(--mono);font-size:.82em}

/* Writing list */
.page>.wrap,.page>.writing-wrap{padding-top:32px}
.writing{list-style:none;padding:0}

/* Landing pages: a strip of the colour-reality image under the header, and the hopeful image behind the footer */
.strip{position:relative;height:96px;overflow:hidden;background:var(--black)}
.strip img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
@media (min-width:900px){.strip{height:140px}}
.site-footer.has-img{position:relative;min-height:260px;display:flex;align-items:flex-end;overflow:hidden}
.site-footer.has-img::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(7,9,12,0) 0%,rgba(7,9,12,.88) 100%)}
.foot-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.site-footer.has-img .foot{position:relative;z-index:2;width:100%;color:#fff}
.site-footer.has-img .foot a{color:#fff}