/* CBA Architects reading pages: the privacy policies and the blog. The home page's ground, type and chrome, quieter. */
@font-face{font-family:"NCL Gastrub";src:url("fonts/NCLGastrub-Regular.woff2") format("woff2");font-weight:300 400;font-display:swap}
:root{
  --ink:#074349;--cream:#EFEEE8;--coral:#ED8879;--coral-text:#EE8E7F;
  --cream-2:rgb(239 238 232 / .66);--cream-3:rgb(239 238 232 / .18);
  --display:"NCL Gastrub",Georgia,serif;--label:"Bebas Neue","Arial Narrow",Impact,sans-serif;--ui:"Inter",system-ui,-apple-system,sans-serif;
  --gl:max(clamp(16px,3vw,44px),env(safe-area-inset-left,0px));--gr:max(clamp(16px,3vw,44px),env(safe-area-inset-right,0px));
  --radius-card:12px;color-scheme:dark;
}
*{box-sizing:border-box}
html,body{background:var(--ink);color:var(--cream)}
body{margin:0;font:300 17px/1.65 var(--ui);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:1px solid var(--coral);outline-offset:4px}
img{max-width:100%}

/* chrome */
.top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:calc(env(safe-area-inset-top,0px) + clamp(16px,2.4vw,30px)) var(--gr) 0 var(--gl)}
.top .wm img{display:block;width:clamp(92px,8.4vw,126px)}
.links{display:flex;gap:clamp(14px,2.2vw,34px)}
.links a{font:400 clamp(13px,1vw,15px)/1 var(--label);letter-spacing:.18em;text-decoration:none;transition:color .3s}
.links a:hover{color:var(--coral-text)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 30px;margin:0 var(--gr) 0 var(--gl);padding-block:20px calc(env(safe-area-inset-bottom,0px) + 22px);
  border-top:1px solid var(--cream-3);font:400 clamp(12px,.9vw,13px)/1.5 var(--label);letter-spacing:.2em;color:var(--cream-2)}
.foot a{text-decoration:none}.foot a:hover{color:var(--cream)}

/* the words */
.doc{max-width:760px;margin:0 auto;padding:clamp(70px,14vh,150px) var(--gr) clamp(70px,12vh,140px) var(--gl)}
.k{margin:0 0 22px;font:400 clamp(13px,1vw,15px)/1.3 var(--label);letter-spacing:.26em;color:var(--coral-text)}
h1{margin:0 0 clamp(34px,6vh,60px);font:400 clamp(40px,5.6vw,84px)/.98 var(--display);letter-spacing:-.02em;text-wrap:balance}
.doc p.sub{margin:calc(-1 * clamp(18px,4vh,40px)) 0 clamp(34px,6vh,60px);font:400 clamp(13px,1vw,15px)/1.4 var(--label);letter-spacing:.2em;color:var(--cream-2)}
h2{margin:2.2em 0 .6em;font:400 clamp(26px,2.6vw,38px)/1.1 var(--display);letter-spacing:-.01em}
h3{margin:2em 0 .5em;font:400 clamp(14px,1.1vw,16px)/1.3 var(--label);letter-spacing:.22em;color:var(--cream)}
p,ul,ol,blockquote{margin:0 0 1em}
.doc p,.doc li{color:rgb(239 238 232 / .82)}
.doc a{color:var(--coral-text);text-underline-offset:.2em}
ul,ol{padding-left:1.2em}li{margin:.3em 0}li::marker{color:var(--coral)}
hr{border:0;border-top:1px solid var(--cream-3);margin:2.4em 0}
blockquote{padding-left:20px;border-left:2px solid var(--coral);font-style:italic}
figure{margin:0 0 clamp(30px,5vh,50px)}
figure img{display:block;width:100%;border-radius:var(--radius-card)}

/* the blog: every post, newest first */
.posts{list-style:none;margin:0;padding:0;border-top:1px solid var(--cream-3)}
.posts li{margin:0;border-bottom:1px solid var(--cream-3)}
.posts a{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:20px 28px;align-items:center;padding:24px 0;text-decoration:none;color:var(--cream)}
.posts img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-card)}
.posts .t{display:block;font:400 clamp(24px,2.2vw,32px)/1.1 var(--display);transition:color .3s}
.posts a:hover .t{color:var(--coral-text)}
.posts .m{display:block;margin-top:10px;font:400 13px/1.3 var(--label);letter-spacing:.2em;color:var(--cream-2)}
@media (max-width:600px){.posts a{grid-template-columns:1fr}.links{gap:12px}}