/* cph circle — landing page. built to HANDOFF.md (newer version). */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  --oxblood:#43121A; --dried-ink:#1A0A0D; --bone:#F2ECE3; --brass:#C79A4B;
  --brass-text:#2b1005; --hairline:#5d2029; --secondary:#b58c8f; --body-on-ox:#e0c9cb;
  --pad-y:clamp(72px,9vw,144px); --pad-x:clamp(24px,5vw,64px);
}

html{scroll-behavior:smooth;}
body{
  background:var(--oxblood);color:var(--body-on-ox);
  font-family:'Archivo',sans-serif;font-weight:400;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.mark{display:block;flex:none;}

/* ---------- brass bars: header + footer ---------- */
.site-header,.site-footer{
  background:var(--brass);color:var(--brass-text);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.site-header{padding:28px var(--pad-x);}
.site-footer{padding:40px var(--pad-x);}
.header-left,.footer-left{display:flex;align-items:center;gap:14px;}
.header-word{font-weight:700;font-size:20px;letter-spacing:-.05em;color:var(--brass-text);}
.footer-note{font-size:15px;color:var(--brass-text);}
.bar-link{
  font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:11px;
  text-transform:uppercase;letter-spacing:.16em;color:var(--brass-text);
  text-decoration:none;border-bottom:1px solid var(--brass-text);padding-bottom:3px;
  transition:color .15s ease,border-color .15s ease;
}
.bar-link:hover{color:var(--oxblood);border-bottom-color:var(--oxblood);}
.bar-link:focus-visible{outline:2px solid var(--brass-text);outline-offset:4px;}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--oxblood);padding:140px var(--pad-x) var(--pad-y);}
.hero-mark{position:absolute;right:-170px;top:-80px;width:min(620px,70vw);height:auto;opacity:.16;pointer-events:none;}
.hero-content{position:relative;display:flex;flex-direction:column;gap:40px;}
.wordmark{font-weight:700;font-size:clamp(56px,13vw,148px);line-height:.84;letter-spacing:-.058em;color:var(--bone);}
.tagline{font-weight:400;font-size:clamp(24px,3.4vw,34px);line-height:1.3;letter-spacing:-.03em;color:var(--brass);max-width:760px;}
.hero-desc{font-weight:400;font-size:21px;line-height:1.55;color:var(--body-on-ox);max-width:620px;}

/* ---------- sections (flex, fluid, no media queries) ---------- */
.section{
  display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,80px);
  padding:var(--pad-y) var(--pad-x);
}
.section-ink{background:var(--dried-ink);}
.col-label{flex:0 0 220px;}
.col-content{flex:1 1 460px;max-width:780px;display:flex;flex-direction:column;gap:36px;}

.label{
  font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:11px;
  text-transform:uppercase;letter-spacing:.16em;color:var(--brass);
  display:inline-block;padding-top:.5em;
}

/* ---------- type roles ---------- */
.headline{font-weight:700;font-size:clamp(32px,4.6vw,46px);line-height:1.05;letter-spacing:-.04em;color:var(--bone);}
.subhead{font-weight:600;font-size:clamp(26px,3.4vw,34px);line-height:1.25;letter-spacing:-.03em;color:var(--bone);}
.lead{font-weight:400;font-size:21px;line-height:1.55;}
.body{font-weight:400;font-size:17px;line-height:1.65;max-width:68ch;}
.secondary{color:var(--secondary);}

/* ---------- what happens: panels ---------- */
.panels{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1px;background:var(--hairline);border:1px solid var(--hairline);
  max-width:1080px;margin-top:20px;
}
.panel{
  background:var(--oxblood);padding:clamp(28px,3vw,40px);min-height:240px;
  display:flex;flex-direction:column;gap:20px;
}
.section-ink .panel{background:var(--dried-ink);}
.panel-num{font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:11px;letter-spacing:.16em;color:var(--secondary);}
.panel-title{font-weight:600;font-size:24px;line-height:1.2;letter-spacing:-.03em;color:var(--bone);margin-top:auto;}
.panel-body{font-weight:400;font-size:17px;line-height:1.65;color:var(--body-on-ox);}
.panel-loud{background:var(--brass);}
.panel-loud .panel-num{color:var(--oxblood);}
.panel-loud .panel-title{color:var(--brass-text);}
.panel-loud .panel-body{color:#4a3210;}

/* ---------- the link section ---------- */
.link-content{flex-direction:row;flex-wrap:wrap;align-items:flex-start;}
.link-text{flex:1 1 340px;display:flex;flex-direction:column;gap:36px;}
.link{
  flex:0 0 auto;display:inline-block;
  font-weight:400;font-size:24px;color:var(--bone);text-decoration:none;
  border-bottom:1px solid var(--brass);padding-bottom:8px;
  transition:color .15s ease,border-color .15s ease;
}
.link:hover{color:var(--brass);border-bottom-color:var(--bone);}
.link:focus-visible{outline:2px solid var(--brass);outline-offset:4px;}