/* Marketing Engineering.
   v3, 2026-08-27, the de-dusting pass. Earlier versions kept at
   _archive/me-v1.css and _archive/me-v2.css.

   v2 was elegant and monotonous: one beige ground, light uppercase headings
   everywhere, no buttons, no numbers, every section the same shape. v3 keeps
   the plates, the mono apparatus and the catalogue table, and takes everything
   else from three references Rene named: the Loncom build, drinkag1.com and
   neilpatel.com.

   Five devices are borrowed from an adjacent identity, deliberately: the navy
   surface, the fine horizontal accent line as a divider, capsule buttons, a
   right-hand image in rounded corners, and Outfit on the wordmark and the
   statement lines. The accent stays warmer than the borrowed one rather than
   matching it, so this identity is a sibling rather than a copy. The full
   rationale, and which identity, is recorded in README.md rather than here. */

:root{
  --paper:#F7F5F1;
  --warm:#EDE7DB;
  --ink:#14181C;
  --body:#3A4045;
  --label:#6B7076;
  --rule:#DCD7CE;
  --rule-dark:#B9B2A6;
  --accent:#E1543A;
  --be-orange:#EF8354;   /* the borrowed line colour, used only on .fineline */
  --deep:#2D3142;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --disp:Archivo,system-ui,sans-serif;
  --maxw:1240px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
body{background:var(--paper);color:var(--ink);
  font:400 17px/1.65 var(--disp);-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ---------- type ---------- */
h1,h2,h3,h4{margin:0;font-family:var(--disp);font-weight:700;
  letter-spacing:-.028em;line-height:1.07;text-transform:none}
h1{font-size:clamp(38px,5.2vw,70px)}
h2{font-size:clamp(29px,3.7vw,50px)}
h3{font-size:clamp(19px,1.7vw,23px);letter-spacing:-.018em;line-height:1.25}
h4{font-size:16px;letter-spacing:-.012em}
p{margin:0 0 1.05em}
strong{font-weight:600}
em{font-style:normal;color:var(--label)}

/* Outfit uppercase, kept for statement moments only. The elegance thread from
   v2, and the borrowed typeface, so it does two jobs at once. */
.stmt,.state p,.rule-block p{font:200 clamp(23px,3vw,40px)/1.3 Outfit,sans-serif;
  letter-spacing:.13em;text-transform:uppercase;margin:0}

.cap{font:500 12px/1.5 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--label)}
.cap.red,.cap.plain{color:var(--accent)}
.cap.blue{color:var(--deep)}
.ref{font:500 12px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.val{display:block;font:400 14px/1.6 var(--mono);letter-spacing:.01em;color:var(--deep)}
.flag{font:500 12px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--label)}
.flag.out{color:var(--accent)}
.mono{font:400 13.5px/1.7 var(--mono);color:var(--label)}
.lede{font-size:19px;line-height:1.6;color:var(--body);max-width:48ch}
.small{font-size:15.5px;line-height:1.7;color:var(--body)}

.tag{display:inline-block;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  padding:8px 13px;background:var(--accent);color:#fff;border-radius:4px;margin-bottom:20px}
.tag.quiet{background:none;color:var(--deep);border:1px solid var(--rule-dark);border-radius:999px}

/* the fine orange line, the borrowed signature divider.
   Drawn from the label rather than placed beside it, because a sibling div
   becomes an extra column inside a grid and collapses the row. */
.fineline{height:2px;width:64px;background:var(--be-orange);margin:0 0 20px}
.cap.line{display:block}
.cap.line::before{content:"";display:block;width:64px;height:2px;
  background:var(--be-orange);margin-bottom:16px}
.band-deep .cap.line::before,.band-red .cap.line::before{background:var(--be-orange)}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 44px}
.pair{display:grid;grid-template-columns:140px minmax(0,1fr);gap:44px}
.trio{display:grid;grid-template-columns:140px minmax(0,1fr) 32%;gap:44px;align-items:start}
.halves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:start}
section{padding:clamp(56px,8vh,92px) 0}
.hr{border-top:1px solid var(--rule)}
.mult{mix-blend-mode:multiply;filter:grayscale(1) contrast(1.15)}

.band-deep{background:var(--deep);color:#fff}
.band-deep .cap{color:rgba(255,255,255,.6)}
.band-deep p{color:rgba(255,255,255,.78)}
.band-warm{background:var(--warm)}
.band-red{background:var(--accent);color:#fff}
.band-red .cap,.band-red p{color:rgba(255,255,255,.85)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font:600 14.5px/1 var(--disp);
  letter-spacing:-.01em;padding:15px 23px;border-radius:999px;background:var(--ink);
  color:#fff;border:1px solid var(--ink);transition:.15s}
.btn:hover{background:#000;border-color:#000;color:#fff}
.btn.red{background:var(--accent);border-color:var(--accent)}
.btn.red:hover{background:#c74630;border-color:#c74630}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule-dark)}
.btn.ghost:hover{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.light{background:#fff;color:var(--ink);border-color:#fff}
.btn.light:hover{background:#fff;color:var(--ink)}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

.more{display:inline-flex;align-items:center;gap:8px;margin-top:26px;
  font:600 13.5px/1 var(--disp);letter-spacing:-.01em;color:var(--accent);
  border-bottom:1px solid var(--accent);padding-bottom:6px}
.more:hover{color:var(--ink);border-bottom-color:var(--ink)}
.more.tight{margin-top:16px}
.more-row{display:flex;gap:32px;flex-wrap:wrap;align-items:baseline}
.band-deep .more,.band-red .more{color:#fff;border-bottom-color:rgba(255,255,255,.6)}

/* ---------- top strip and navigation ---------- */
.topstrip{background:var(--deep);color:#fff}
.topstrip .in{max-width:var(--maxw);margin:0 auto;padding:9px 44px;display:flex;gap:18px;
  align-items:center;font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.topstrip a{border-bottom:1px solid rgba(255,255,255,.4)}

nav{background:var(--paper);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:40}
nav .in{max-width:var(--maxw);margin:0 auto;padding:0 44px;height:86px;
  display:flex;align-items:center;gap:24px}
nav .lockup{display:flex;align-items:center;gap:15px}
nav .wm{font:200 22.3px/.98 Outfit,sans-serif;letter-spacing:-.045em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap}
nav .wm .io{opacity:.55}
nav .links{margin-left:auto;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
nav .links a{font:500 14.5px/1 var(--disp);color:var(--body)}
nav .links a:hover{color:var(--ink)}
nav .links a.on{color:var(--accent)}
/* `nav .links a` outranks `.btn`, so the pill needs restating at higher weight
   or its label renders in body grey on a near-black ground. */
nav .links a.btn,nav .links a.btn:hover{color:#fff;padding:12px 19px}

/* ---------- hero ---------- */
.hero{padding:clamp(52px,7vh,80px) 0 clamp(52px,7vh,84px)}
.hero .num{font:400 12px/1.9 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--label)}
.hero h1{margin-top:14px;max-width:16ch}
.hero .abs{margin:24px 0 0;max-width:52ch;font-size:18.5px;line-height:1.6;color:var(--body)}
.hero figure{margin:0;background:#fff;border:1px solid var(--rule);border-radius:14px;padding:24px}
.hero figure img{width:100%;height:auto}
.note-hero .trio{grid-template-columns:140px minmax(0,1fr) 26%}
.note-hero h1{font-size:clamp(30px,3.6vw,50px);max-width:none}

/* ---------- stat row ---------- */
.stats{display:grid;grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.stats div{padding:24px 20px;border-right:1px solid var(--rule)}
.stats div:last-child{border-right:0}
.stats .n{font:700 clamp(28px,3vw,40px)/1 var(--disp);letter-spacing:-.035em}
.stats .k{display:block;margin-top:9px;font:400 11.5px/1.5 var(--mono);
  letter-spacing:.08em;text-transform:uppercase;color:var(--label)}

/* ---------- statement ---------- */
.def h2{max-width:24ch;margin-top:12px}
.def p{margin:22px 0 0;max-width:54ch;font-size:18px;line-height:1.65;color:var(--body)}
.state{padding:clamp(64px,9vh,100px) 0;border-top:1px solid var(--rule)}
.state p{max-width:30ch}

/* ---------- catalogue, retained from v2 ---------- */
.list{padding:clamp(56px,8vh,92px) 0 14px}
.list .top{display:grid;grid-template-columns:140px minmax(0,1fr);gap:44px;margin-bottom:clamp(32px,5vh,52px)}
.list .top p{margin:14px 0 0;max-width:54ch;font-size:16.5px;color:var(--body)}
.hd{display:grid;gap:36px;padding-bottom:11px;border-bottom:1px solid var(--ink)}
.item{display:grid;gap:36px;padding:24px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.item p{margin:0;font-size:16.5px;line-height:1.65;color:var(--body)}
.item p + p{margin-top:9px}
.item .note{display:block;margin-top:11px;font:400 13.5px/1.7 var(--mono);color:var(--label)}
.item .note em{color:var(--accent);font-weight:500}
.band-deep .hd{border-bottom-color:rgba(255,255,255,.5)}
.band-deep .item{border-bottom-color:rgba(255,255,255,.16)}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:38px}
.card{background:#fff;border:1px solid var(--rule);border-radius:10px;padding:22px 20px;
  display:flex;flex-direction:column}
.band-deep .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.17)}
.card .fig{background:var(--warm);border-radius:8px;height:130px;padding:14px 10px;
  display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.card .fig img{max-height:100px;width:auto}
.card h3{margin-bottom:7px}
.card p{margin:0;font-size:15px;line-height:1.55;color:var(--body)}
.band-deep .card p{color:rgba(255,255,255,.74)}
.card .owner{margin-top:auto;padding-top:14px;font:500 11.5px/1 var(--mono);
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.band-deep .card .owner{color:#F0A08F}

/* ---------- journal cards ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
.post{background:#fff;border:1px solid var(--rule);border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column;transition:.15s}
.post:hover{border-color:var(--rule-dark);transform:translateY(-2px)}
.post .top{background:var(--warm);height:160px;display:flex;align-items:center;
  justify-content:center;position:relative}
.post .top img{max-height:126px;width:auto}
.post .top .tag{position:absolute;left:13px;top:13px;margin:0}
.post .bd{padding:20px 19px 22px;display:flex;flex-direction:column;flex:1}
.post h3{margin-bottom:9px}
.post p{font-size:15px;line-height:1.55;color:var(--body);margin:0 0 16px}
.post .meta{margin-top:auto;display:flex;align-items:center;gap:10px;
  font:400 11.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--label)}
.post .arrow{margin-left:auto;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--rule-dark);display:flex;align-items:center;justify-content:center;
  color:var(--accent);font-size:13px}

/* ---------- findings ---------- */
.findings{display:grid;grid-template-columns:repeat(4,1fr);margin-top:36px;
  border-top:1px solid rgba(255,255,255,.22)}
.find{padding:24px 24px 24px 0;border-right:1px solid rgba(255,255,255,.14)}
.find:last-child{border-right:0}
.find .n{display:block;font:700 clamp(30px,3.4vw,44px)/1 var(--disp);letter-spacing:-.035em;color:#fff}
.find .k{display:block;margin:11px 0 9px;font:500 11.5px/1.5 var(--mono);
  letter-spacing:.08em;text-transform:uppercase;color:#F0A08F}
.find p{margin:0;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.72)}

/* ---------- plates ---------- */
.plate{background:var(--warm);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  margin-top:clamp(52px,7vh,88px);padding:clamp(46px,6.5vh,78px) 0;text-align:center}
.plate img{width:auto;max-height:clamp(280px,40vh,430px);margin:0 auto}
.plate figcaption{margin-top:24px;font:400 12px/1 var(--mono);letter-spacing:.09em;
  text-transform:uppercase;color:var(--label)}
.plate.flush{margin-top:0}

.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;align-items:end;
  padding:clamp(46px,6.5vh,76px) 0 clamp(28px,4vh,44px)}
.strip figure{margin:0;text-align:center;border-top:1px solid var(--rule);padding-top:28px}
.strip img{width:100%;height:auto;margin:0 auto 18px}
.strip figcaption{font:400 12px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--label)}

/* ---------- prose ---------- */
.prose{max-width:64ch}
.prose p{font-size:17.5px;line-height:1.75;color:var(--body)}
.prose h2{margin:1.6em 0 .6em}
.prose h3{margin:1.8em 0 .5em}
.prose ul{list-style:none;padding:0;margin:0 0 1.3em}
.prose li{position:relative;padding-left:26px;margin-bottom:11px;font-size:17px;
  line-height:1.65;color:var(--body)}
.prose li::before{content:"";position:absolute;left:0;top:.8em;width:13px;height:2px;background:var(--be-orange)}
.prose a,.qa a,.entry h3 a{color:var(--accent);border-bottom:1px solid rgba(225,84,58,.35)}
.prose a:hover,.entry h3 a:hover{border-bottom-color:var(--accent)}

.rule-block{border-top:2px solid var(--accent);border-bottom:1px solid var(--rule);
  padding:30px 0;margin:40px 0}
.rule-block p{max-width:28ch;font-size:clamp(19px,2.2vw,27px)}
.rule-block .cap{display:block;margin-bottom:14px;color:var(--accent)}

.qa{border-top:1px solid var(--rule);padding:26px 0}
.qa:last-of-type{border-bottom:1px solid var(--rule)}
.qa h3{margin-bottom:12px;max-width:38ch}
.qa p{margin:0;font-size:16.5px;line-height:1.7;color:var(--body);max-width:72ch}

/* ---------- journal feed rows ---------- */
.entry{display:grid;grid-template-columns:140px minmax(0,1.15fr) 1.1fr;gap:44px;
  padding:28px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.entry h3{max-width:32ch}
.entry h3 a{border-bottom:0}
.entry h3 a:hover{border-bottom:1px solid var(--accent)}
.entry p{margin:0;font-size:16.5px;line-height:1.65;color:var(--body)}
.entry .note{display:block;margin-top:7px;font:400 13px/1.6 var(--mono);color:var(--label)}
.entry .meta{display:block;margin-top:13px;font:400 12px/1.6 var(--mono);
  letter-spacing:.07em;text-transform:uppercase;color:var(--label)}

/* ---------- form ---------- */
.field{display:block;margin-bottom:22px}
.field .k{display:block;font:500 12px/1 var(--mono);letter-spacing:.09em;
  text-transform:uppercase;color:var(--deep);margin-bottom:9px}
.field input,.field select,.field textarea{width:100%;background:#fff;
  border:1px solid var(--rule);border-radius:8px;color:var(--ink);
  font:400 16px/1.5 var(--disp);padding:13px 14px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field textarea{min-height:96px;resize:vertical}
button.btn{cursor:pointer;font-family:var(--disp)}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#fff;padding:52px 0 42px}
footer .in{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:34px;
  max-width:var(--maxw);margin:0 auto;padding:0 44px}
footer .cap{color:rgba(255,255,255,.55)}
footer p{margin:14px 0 0;font-size:15px;line-height:1.85;color:rgba(255,255,255,.78)}
footer a{display:block;color:rgba(255,255,255,.78);font-size:15px;line-height:1.85}
footer a:hover{color:#fff}
footer .fine{grid-column:1/-1;margin-top:30px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.16);font:400 12px/1.8 var(--mono);
  letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.5)}
footer .fine a{display:inline;color:rgba(255,255,255,.7)}

@media(max-width:1120px){
  .hd,.item{gap:26px}
  .cards{grid-template-columns:1fr 1fr}
  .strip{grid-template-columns:repeat(2,1fr)}
  .posts{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr 1fr}
  .findings{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .wrap,nav .in,footer .in,.topstrip .in{padding-left:22px;padding-right:22px}
  .trio,.pair,.halves,.list .top,.entry,footer .in{grid-template-columns:1fr;gap:18px}
  .hd{display:none}
  .item{grid-template-columns:1fr !important;gap:11px}
  .cards,.posts,.strip,.stats,.findings{grid-template-columns:1fr}
  .stats div,.find{border-right:0;border-bottom:1px solid var(--rule)}
  .hero figure{margin-top:28px}
  nav .in{height:auto;padding-top:12px;padding-bottom:10px;flex-wrap:wrap}
  nav .links{width:100%;margin-left:0;gap:14px}
  nav .links a{font-size:13.5px}
  section{padding:52px 0}
}