/* coalfacility.com homepage rebuild: every button and text element is real HTML/CSS; the pictures are
   cut from the original mockup; everything sits on coal. */
@font-face{font-family:"Barlow";font-weight:500;font-display:swap;src:url(../fonts/barlow-latin-500-normal.woff2) format("woff2");}
@font-face{font-family:"Barlow";font-weight:600;font-display:swap;src:url(../fonts/barlow-latin-600-normal.woff2) format("woff2");}
@font-face{font-family:"Barlow";font-weight:700;font-display:swap;src:url(../fonts/barlow-latin-700-normal.woff2) format("woff2");}
@font-face{font-family:"Libre Caslon Text";font-weight:700;font-display:swap;src:url(../fonts/libre-caslon-text-latin-700-normal.woff2) format("woff2");}

*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --ink:#ece6da;--muted:#a99f8c;--dim:#7d7466;
  --gold:#d9a85a;--gold-hi:#ebbe70;--gold-lo:#b5843c;--gold-edge:#8a6327;
  --up:#7fd77f;--down:#e8826a;
  --panel:rgba(30,27,25,.90);--panel-2:rgba(22,20,18,.92);--line:rgba(255,255,255,.08);
  --serif:"Libre Caslon Text",Georgia,serif;--sans:"Barlow",system-ui,-apple-system,sans-serif;
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
html{background:#0b0a09 url(../img/rb/rock-tile.webp) 0 0/1125px auto repeat;}
body{min-height:100vh;color:var(--ink);font:500 16px/1.4 var(--sans);background:transparent;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px;}

.page{max-width:1680px;margin:0 auto;padding:18px 24px 0;}
.hero{min-height:400px;}
@media (min-width:1300px){.hero .pic{width:54%;}.hero .pic img{object-position:right 22%;}}
.panel{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:6px;
  box-shadow:0 10px 30px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.04);}

/* gold button: recreated from the mockup's painted buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;height:2.5em;padding:0 1.35em;border-radius:3px;
  background:linear-gradient(180deg,var(--gold-hi) 0%,var(--gold) 45%,var(--gold-lo) 100%);border:1px solid var(--gold-edge);
  color:#1e160c;font:600 1rem/1 var(--sans);letter-spacing:.01em;white-space:nowrap;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,240,200,.55),inset 0 -2px 0 rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.55);
  transition:filter .15s,transform .15s;}
.btn:hover{filter:brightness(1.08);}
.btn:active{transform:translateY(1px);}
.btn.sm{height:2.1em;padding:0 1.05em;font-size:.9rem;}

/* header */
.top{display:flex;align-items:center;gap:24px;padding:14px 22px;}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;}
.brand img{width:44px;height:auto;}
.brand span{font:700 1.65rem/1 var(--sans);letter-spacing:.01em;color:#f4efe6;text-shadow:0 1px 2px rgba(0,0,0,.6);}
.nav{display:flex;gap:26px;}
.nav a{font-size:.98rem;color:#e6dfd2;padding:4px 0;border-bottom:2px solid transparent;}
.nav a:hover,.nav a.on{border-color:var(--gold);color:#fff;}

/* hero */
.hero{position:relative;display:grid;grid-template-columns:44% 56%;min-height:360px;margin-top:14px;overflow:hidden;}
.hero .txt{position:relative;z-index:2;padding:46px 0 40px 38px;align-self:center;}
.hero h1{font:700 3.05rem/1.1 var(--serif);color:#efe9de;text-shadow:0 2px 6px rgba(0,0,0,.6);}
.hero p{margin:18px 0 26px;font-size:1.12rem;color:#ddd5c6;max-width:24em;}
.hero .pic{position:absolute;right:0;top:0;bottom:0;width:62%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%);}
.hero .pic img{width:100%;height:100%;object-fit:cover;object-position:right center;}
.page{padding-bottom:36px;}
/* subpage hero */
.hero.sub h1{font-size:clamp(1.9rem,3.1vw,2.7rem);}
.hero .eyebrow{display:inline-block;font:600 .74rem/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid rgba(212,163,90,.35);padding-bottom:6px;margin-bottom:16px;}
.hero .meta{margin:16px 0 22px;font-size:.92rem;color:var(--muted);}
.hero .lede{margin:16px 0 24px;}
/* footer */
.foot{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin:18px 0 0;padding:16px 22px;border-radius:6px 6px 0 0;}
.flinks{display:flex;gap:26px;flex-wrap:wrap;margin-right:auto;}
.flinks a{display:flex;align-items:center;gap:7px;font-size:.95rem;color:#e6dfd2;}
.flinks a:hover{color:var(--gold-hi);}
.flinks svg{width:16px;height:16px;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.fsub{display:flex;gap:6px;}
.fsub input{width:210px;height:2.1em;background:#15120f;border:1px solid #4a4038;border-radius:3px;color:var(--ink);font:500 .9rem var(--sans);padding:0 10px;}
.fsub input::placeholder{color:#8a8070;}
.copy{padding:12px 22px 22px;font-size:.78rem;color:var(--dim);text-align:center;background:var(--panel-2);border-radius:0 0 6px 6px;border:1px solid var(--line);border-top:0;}
@media (max-width:900px){.nav{gap:16px;}.hero h1{font-size:2.5rem;}.hero.sub h1{font-size:2.1rem;}}
@media (max-width:760px){
  .page{padding:14px 12px 24px;}
  .top{flex-wrap:wrap;gap:10px 14px;padding:12px 14px;}
  .brand span{font-size:1.35rem;}
  .brand img{width:36px;}
  .nav{order:3;width:100%;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding-top:10px;}
  .nav a{font-size:.92rem;}
  .hero{grid-template-columns:1fr;min-height:0;}
  .hero .pic{position:relative;width:100%;height:220px;order:-1;
    -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent);}
  .hero .txt{padding:6px 18px 26px;}
  .hero h1{font-size:2.15rem;}
  .hero.sub h1{font-size:1.85rem;}
  .foot{gap:14px;padding:16px 14px;}
  .flinks{gap:14px 20px;}
  .fsub{width:100%;}
  .fsub input{flex:1;width:auto;}
  html{background-size:700px auto;}
}