/* Dreamliner Construction — project page template.
Structure inherited from the Jacob Construction /portfolio/ template
(docs/interventions/jacob-project-pages/deploy/project.css), itself inherited from
the Atticare /project/ template (2026-08-13 spec). Palette taken from
mydreamliner.com's own compiled CSS (assets/styles-*.css), not guessed:
background #000, card #0b0b0b, gold #eabf60, muted-fg #d3d4d6, border #ffffff1a.
Fonts Montserrat 600/700/800 + Open Sans 400/600, also from the live site's . */
:root{
--bg:#000; --card:#0b0b0b; --fg:#fff; --muted:#d3d4d6;
--border:#ffffff1a; --gold:#eabf60; --gold-dk:#c79a3a;
--gold-grad:linear-gradient(180deg,#f7e3a8 0%,#eabf60 45%,#c79a3a 100%);
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{font-family:'Open Sans',sans-serif; font-size:18px; line-height:1.65; color:var(--fg); background:var(--bg)}
h1,h2,h3{font-family:'Montserrat',sans-serif; line-height:1.25; font-weight:700}
a{color:var(--gold)}
img{max-width:100%; display:block}
/* prototype banner — this is a sample, and the page must say so out loud */
.ribbon{background:var(--gold); color:#1a1300; font-size:14.5px; padding:10px 16px; text-align:center; font-weight:600}
.ribbon a{color:#1a1300}
.wrap{max-width:1060px; margin:0 auto; padding:0 20px}
.crumbs{font-size:14px; color:var(--muted); padding:22px 0 0}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--gold)}
.eyebrow{font-family:'Montserrat'; font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin:26px 0 10px}
h1{font-size:clamp(28px,4.5vw,42px); font-weight:700; max-width:22ch}
.lede{font-size:20px; color:var(--muted); margin:16px 0 0; max-width:58ch}
.hero{display:grid; gap:28px; margin:34px 0 0}
@media(min-width:900px){ .hero{grid-template-columns:minmax(0,1fr) 360px; align-items:start} }
/* signature element: the job record */
.job-record{background:var(--card); border:1px solid var(--border); border-top:4px solid var(--gold); padding:26px 24px 10px; border-radius:2px}
.job-record h2{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:700; display:flex; justify-content:space-between; align-items:baseline}
.job-record h2 .ref{font-family:monospace; font-size:12px; color:var(--gold); text-transform:none; letter-spacing:0}
.job-record dl{margin:14px 0 0}
.job-record .row{display:grid; grid-template-columns:minmax(88px,38%) 1fr; gap:10px 14px; align-items:start; padding:11px 0; border-bottom:1px solid var(--border)}
.job-record .row:last-child{border-bottom:0}
.job-record dt{font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; padding-top:3px}
.job-record dd{text-align:left; font-weight:500; font-size:16px; line-height:1.45; overflow-wrap:anywhere; color:var(--fg)}
.job-record dd .gap{color:var(--gold); font-style:italic; font-weight:600}
.stamp{display:inline-block; margin:16px 0 18px; padding:6px 12px; border:2px solid var(--gold); color:var(--gold); font-family:'Montserrat'; font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase; transform:rotate(-2deg)}
.finenote{font-size:13.5px; color:var(--muted); margin:6px 0 16px; line-height:1.5}
.cta-inline{margin:18px 0 0; border:1px solid var(--border); border-left:4px solid var(--gold); background:var(--card); padding:18px 20px}
.cta-inline p{font-size:16px; margin:0 0 12px; color:var(--muted)}
.cta-inline .buttons{display:flex; flex-wrap:wrap; gap:10px}
.cta-inline .btn{font-size:14.5px; padding:11px 20px}
/* aspect-ratio on a percentage-width ![]()
inside a CSS Grid track silently fails
in Chrome (falls back to the image's raw natural pixel height, only width gets
clamped — a squished/stretched photo). The ratio box has to be a plain element
(.frame), not the img itself, or the figcaption below it gets clipped too —
markup is ![]()